From 6ee404b528d6b6d91673c93b6c6c67611eb25061 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 26 Feb 2025 13:34:24 +0800 Subject: [PATCH 001/311] add InteractiveLayer widget --- lib/src/deriv_chart/chart/main_chart.dart | 3 +++ .../drawing_tool_chart/interactive_layer.dart | 21 +++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 40bacecdd..039222dc5 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -1,4 +1,5 @@ import 'package:collection/collection.dart' show IterableExtension; +import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/interactive_layer.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; import 'package:deriv_chart/src/models/tick.dart'; @@ -351,6 +352,8 @@ class _ChartImplementationState extends BasicChartState { if (widget.markerSeries != null) _buildMarkerArea(), if (widget.drawingTools != null) _buildDrawingToolChart(widget.drawingTools!), + if (widget.drawingTools != null) + InteractiveLayer(drawingTools: widget.drawingTools!), if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) _buildCrosshairArea(), diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart new file mode 100644 index 000000000..214504131 --- /dev/null +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -0,0 +1,21 @@ +import 'package:flutter/material.dart'; + +import 'drawing_tools.dart'; + +/// Interactive layer of the chart package where elements can be drawn and can +/// be interacted with. +class InteractiveLayer extends StatefulWidget { + const InteractiveLayer({super.key, required this.drawingTools}); + + final DrawingTools drawingTools; + + @override + State createState() => _InteractiveLayerState(); +} + +class _InteractiveLayerState extends State { + @override + Widget build(BuildContext context) { + return const Placeholder(); + } +} From eb23951b61be7dc3b4e554fed6bd3528d89fe5bb Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 26 Feb 2025 14:49:55 +0800 Subject: [PATCH 002/311] register callbacks to GestureManager --- .../drawing_tool_chart/interactive_layer.dart | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 214504131..4b5f320e9 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -1,4 +1,6 @@ +import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; import 'drawing_tools.dart'; @@ -14,6 +16,38 @@ class InteractiveLayer extends StatefulWidget { } class _InteractiveLayerState extends State { + /// 1. Keep the state of the selected tool here, the tool that the focus is on + /// it right now + /// 2. provide callback to outside to let them what is the current selected tool + /// 3. This widget will handle adding a tool, can delegate adding to inner components + /// but anyway it will happen here. either directly or indirectly through inner components + /// 4. This widget knows the current selected tool, will update its position when its interacted + /// 5. the decision to make which tool is selected based on the user click and it's coordinate will happen here + /// 6. + + @override + void initState() { + super.initState(); + + // register the callback + context.read() + ..registerCallback(onPanUpdate) + ..registerCallback(onLongPressStart) + ..registerCallback(onLongPressMoveUpdate); + } + + void onPanUpdate(DragUpdateDetails details) { + // handle pan update + } + + void onLongPressStart(LongPressStartDetails details) { + // handle long press start + } + + void onLongPressMoveUpdate(LongPressMoveUpdateDetails details) { + // handle long press move update + } + @override Widget build(BuildContext context) { return const Placeholder(); From a5ac516d2523459f9fd304269168df3116c45d75 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 27 Feb 2025 11:07:34 +0800 Subject: [PATCH 003/311] drawing tools in interactive layer --- lib/src/deriv_chart/chart/main_chart.dart | 13 +- .../drawing_tool_chart/interactive_layer.dart | 239 +++++++++++++++++- 2 files changed, 247 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 039222dc5..6564252a8 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -350,10 +350,17 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), + // if (widget.drawingTools != null) + // _buildDrawingToolChart(widget.drawingTools!), if (widget.drawingTools != null) - _buildDrawingToolChart(widget.drawingTools!), - if (widget.drawingTools != null) - InteractiveLayer(drawingTools: widget.drawingTools!), + InteractiveLayer( + drawingTools: widget.drawingTools!, + series: widget.mainSeries as DataSeries, + chartConfig: context.watch(), + quoteToCanvasY: chartQuoteToCanvasY, + epochToCanvasX: xAxis.xFromEpoch, + quoteFromCanvasY: chartQuoteFromCanvasY, + ), if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) _buildCrosshairArea(), diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 4b5f320e9..f25d2587c 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -1,15 +1,46 @@ +import 'package:deriv_chart/deriv_chart.dart'; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/repository.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_series/data_series.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.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/data_model/point.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; +import '../chart/data_visualization/drawing_tools/drawing_data.dart'; +import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; +import '../chart/y_axis/y_axis_config.dart'; import 'drawing_tools.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. class InteractiveLayer extends StatefulWidget { - const InteractiveLayer({super.key, required this.drawingTools}); + const InteractiveLayer({ + super.key, + required this.drawingTools, + required this.series, + required this.chartConfig, + required this.quoteToCanvasY, + required this.quoteFromCanvasY, + required this.epochToCanvasX, + this.selectedDrawingTool, + }); final DrawingTools drawingTools; + final DataSeries series; + final ChartConfig chartConfig; + final QuoteToY quoteToCanvasY; + final QuoteFromY quoteFromCanvasY; + final EpochToX epochToCanvasX; + + /// Selected drawing tool. + final DrawingToolConfig? selectedDrawingTool; @override State createState() => _InteractiveLayerState(); @@ -48,8 +79,212 @@ class _InteractiveLayerState extends State { // handle long press move update } + DraggableEdgePoint _draggableStartPoint = DraggableEdgePoint(); + DraggableEdgePoint _draggableMiddlePoint = DraggableEdgePoint(); + DraggableEdgePoint _draggableEndPoint = DraggableEdgePoint(); + bool isTouchHeld = false; + @override Widget build(BuildContext context) { - return const Placeholder(); + final XAxisModel xAxis = context.watch(); + + final Repository repo = + context.watch>(); + final List configs = repo.items.toList(); + + final List drawings = configs + .map((DrawingToolConfig config) => config.drawingData) + .toList(); + + return Stack( + fit: StackFit.expand, + children: [ + ...drawings + .map((e) => CustomPaint( + foregroundPainter: _DrawingPainter( + drawingData: e!, + series: widget.series, + config: repo.items + .where((DrawingToolConfig config) => + config.configId == e.id) + .first, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToCanvasY, + quoteFromY: widget.quoteFromCanvasY, + draggableStartPoint: _draggableStartPoint, + draggableMiddlePoint: _draggableMiddlePoint, + isTouchHeld: isTouchHeld, + isDrawingToolSelected: widget.selectedDrawingTool != null, + draggableEndPoint: _draggableEndPoint, + leftEpoch: xAxis.leftBoundEpoch, + rightEpoch: xAxis.rightBoundEpoch, + updatePositionCallback: ( + EdgePoint edgePoint, + DraggableEdgePoint draggableEdgePoint, + ) => + draggableEdgePoint.updatePosition( + edgePoint.epoch, + edgePoint.quote, + xAxis.xFromEpoch, + widget.quoteToCanvasY, + ), + setIsOverStartPoint: ({ + required bool isOverPoint, + }) { + // isOverStartPoint = isOverPoint; + }, + setIsOverMiddlePoint: ({ + required bool isOverPoint, + }) { + // isOverMiddlePoint = isOverPoint; + }, + setIsOverEndPoint: ({ + required bool isOverPoint, + }) { + // isOverEndPoint = isOverPoint; + }, + ), + )) + .toList(), + ], + ); + } +} + +class _DrawingPainter extends CustomPainter { + _DrawingPainter({ + required this.drawingData, + required this.series, + required this.config, + required this.theme, + required this.chartConfig, + required this.epochFromX, + required this.epochToX, + required this.quoteToY, + required this.quoteFromY, + required this.draggableStartPoint, + required this.setIsOverStartPoint, + required this.updatePositionCallback, + required this.leftEpoch, + required this.rightEpoch, + this.isDrawingToolSelected = false, + this.isTouchHeld = false, + this.draggableMiddlePoint, + this.draggableEndPoint, + this.setIsOverMiddlePoint, + this.setIsOverEndPoint, + }); + + final DrawingData drawingData; + final DataSeries series; + final DrawingToolConfig config; + final ChartTheme theme; + final ChartConfig chartConfig; + final bool isDrawingToolSelected; + final bool isTouchHeld; + final int Function(double x) epochFromX; + final double Function(int x) epochToX; + final double Function(double y) quoteToY; + final DraggableEdgePoint draggableStartPoint; + final DraggableEdgePoint? draggableMiddlePoint; + final DraggableEdgePoint? draggableEndPoint; + final void Function({required bool isOverPoint}) setIsOverStartPoint; + final void Function({required bool isOverPoint})? setIsOverMiddlePoint; + final void Function({required bool isOverPoint})? setIsOverEndPoint; + final Point Function( + EdgePoint edgePoint, + DraggableEdgePoint draggableEdgePoint, + ) updatePositionCallback; + + /// Current left epoch of the chart. + final int leftEpoch; + + /// Current right epoch of the chart. + final int rightEpoch; + + double Function(double) quoteFromY; + + @override + void paint(Canvas canvas, Size size) { + for (final Drawing drawingPart in drawingData.drawingParts) { + YAxisConfig.instance.yAxisClipping(canvas, size, () { + drawingPart.onPaint( + canvas, + size, + theme, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + config, + drawingData, + series, + updatePositionCallback, + draggableStartPoint, + draggableMiddlePoint: draggableMiddlePoint, + draggableEndPoint: draggableEndPoint, + ); + }); + + drawingPart.onLabelPaint( + canvas, + size, + theme, + chartConfig, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + config, + drawingData, + series, + ); + } + } + + @override + bool shouldRepaint(_DrawingPainter oldDelegate) => drawingData.shouldRepaint( + oldDelegate.drawingData, + leftEpoch, + rightEpoch, + draggableStartPoint, + draggableEndPoint: draggableEndPoint, + ); + + @override + bool shouldRebuildSemantics(_DrawingPainter oldDelegate) => false; + + @override + bool hitTest(Offset position) { + for (final Drawing drawingPart in drawingData.drawingParts) { + if (drawingPart.hitTest( + position, + epochToX, + quoteToY, + config, + draggableStartPoint, + setIsOverStartPoint, + draggableMiddlePoint: draggableMiddlePoint, + draggableEndPoint: draggableEndPoint, + setIsOverMiddlePoint: setIsOverMiddlePoint, + setIsOverEndPoint: setIsOverEndPoint, + )) { + if (isDrawingToolSelected) { + return false; + } + return true; + } + } + + if (!isTouchHeld && drawingData.isDrawingFinished) { + /// For deselecting the drawing when tapping outside of the drawing. + drawingData + ..isSelected = false + ..isHovered = false; + } + return false; } } From 8430bcc02497f38148205e36f4ec67ade06dc54c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 27 Feb 2025 15:21:31 +0800 Subject: [PATCH 004/311] some minor changes --- .../drawing_tools/line/line_drawing.dart | 12 +++++-- .../drawing_tool_chart/interactive_layer.dart | 31 +++++++++++++------ 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart index 08d15704f..af1d148e7 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart @@ -226,8 +226,14 @@ class LineDrawing extends Drawing with LineVectorDrawingMixin { final bool isWithinRange = dotProduct > 0 && dotProduct < lineLength; - return isWithinRange && distance.abs() <= lineStyle.thickness + 6 || - (_startPoint!.isClicked(position, markerRadius) || - _endPoint!.isClicked(position, markerRadius)); + final returnValue = + isWithinRange && distance.abs() <= lineStyle.thickness + 6 || + (_startPoint!.isClicked(position, markerRadius) || + _endPoint!.isClicked(position, markerRadius)); + + print( + 'returnValue: $returnValue distance: $distance lineLength: $lineLength isWithinRange: $isWithinRange distance.abs(): ${distance.abs()} lineStyle.thickness: ${lineStyle.thickness} '); + + return returnValue; } } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index f25d2587c..a2e2f243b 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -121,16 +121,25 @@ class _InteractiveLayerState extends State { draggableEndPoint: _draggableEndPoint, leftEpoch: xAxis.leftBoundEpoch, rightEpoch: xAxis.rightBoundEpoch, + onDrawingToolClicked: (DrawingData drawingData) { + print('#### onDrawingToolClicked ${drawingData.id}'); + // if (widget.selectedDrawingTool != null && + // widget.selectedDrawingTool!.configId != e.id) { + // widget.drawingTools.clearDrawingToolSelection(); + // } + // widget.drawingTools.onMouseEnter(e.id); + }, updatePositionCallback: ( EdgePoint edgePoint, DraggableEdgePoint draggableEdgePoint, - ) => - draggableEdgePoint.updatePosition( - edgePoint.epoch, - edgePoint.quote, - xAxis.xFromEpoch, - widget.quoteToCanvasY, - ), + ) { + return draggableEdgePoint.updatePosition( + edgePoint.epoch, + edgePoint.quote, + xAxis.xFromEpoch, + widget.quoteToCanvasY, + ); + }, setIsOverStartPoint: ({ required bool isOverPoint, }) { @@ -170,6 +179,7 @@ class _DrawingPainter extends CustomPainter { required this.updatePositionCallback, required this.leftEpoch, required this.rightEpoch, + required this.onDrawingToolClicked, this.isDrawingToolSelected = false, this.isTouchHeld = false, this.draggableMiddlePoint, @@ -207,6 +217,8 @@ class _DrawingPainter extends CustomPainter { double Function(double) quoteFromY; + final Function(DrawingData) onDrawingToolClicked; + @override void paint(Canvas canvas, Size size) { for (final Drawing drawingPart in drawingData.drawingParts) { @@ -272,11 +284,10 @@ class _DrawingPainter extends CustomPainter { setIsOverMiddlePoint: setIsOverMiddlePoint, setIsOverEndPoint: setIsOverEndPoint, )) { - if (isDrawingToolSelected) { - return false; - } + onDrawingToolClicked(drawingData); return true; } + return false; } if (!isTouchHeld && drawingData.isDrawingFinished) { From c00dbf3af95465cdb6698ec415a8759ca4b771b5 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 27 Feb 2025 18:36:12 +0800 Subject: [PATCH 005/311] add InteractableDrawing class --- .../drawing_tools_ui/drawing_tool_config.dart | 19 +++++++++++++++++++ .../drawing_tools/drawing_data.dart | 3 +++ specs/interactive_layer.md | 0 3 files changed, 22 insertions(+) create mode 100644 specs/interactive_layer.md diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 2da1e5772..e933afe29 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -70,6 +70,9 @@ abstract class DrawingToolConfig extends AddOnConfig { /// Key of drawing tool config id property in JSON. static String configIdKey = 'configId'; + /// Returns back the [InteractableDrawing] instance of this drawing tool. + InteractableDrawing getInteractableDrawing(); + /// Creates a copy of this object. DrawingToolConfig copyWith({ String? configId, @@ -95,3 +98,19 @@ abstract class DrawingToolConfig extends AddOnConfig { }) => null; } + +/// The class that will be generated by the drawing tool config instance when +/// they are created or the saved ones that are loaded from storage. +/// The information from this class (its subclasses) will be used to draw the +/// tool on the chart. +/// It will keep the latest state of the drawing tool as the user interacts +/// with the tools in the runtime. +/// During the time that user interacts with a tool. by some debounce mechanism +/// This class will update the config which is supposed to be saved in the storage. +abstract class InteractableDrawing { + /// Initializes [InteractableDrawing]. + InteractableDrawing({required this.config}); + + /// The drawing tool config. + final DrawingToolConfig config; +} diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart index 16a2f0afa..f69bfa06d 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart @@ -68,3 +68,6 @@ class DrawingData { return false; } } + + +abstract class diff --git a/specs/interactive_layer.md b/specs/interactive_layer.md new file mode 100644 index 000000000..e69de29bb From 4541f010f43e17e3179b581c642a5af14301ac7e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 27 Feb 2025 18:41:21 +0800 Subject: [PATCH 006/311] WIP: adding InteractableDrawing classes for Line drawing tool --- .../drawing_tools_ui/drawing_tool_config.dart | 20 ++++++++++++++++++- .../line/line_drawing_tool_config.dart | 7 +++++++ .../drawing_tools/drawing_data.dart | 3 --- 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index e933afe29..faa2aeb8a 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -71,7 +71,9 @@ abstract class DrawingToolConfig extends AddOnConfig { static String configIdKey = 'configId'; /// Returns back the [InteractableDrawing] instance of this drawing tool. - InteractableDrawing getInteractableDrawing(); + InteractableDrawing getInteractableDrawing() { + throw UnimplementedError('getInteractableDrawing() is not implemented.'); + } /// Creates a copy of this object. DrawingToolConfig copyWith({ @@ -114,3 +116,19 @@ abstract class InteractableDrawing { /// The drawing tool config. final DrawingToolConfig config; } + +/// Interactable drawing for line drawing tool. +class LineInteractableDrawing extends InteractableDrawing { + /// Initializes [LineInteractableDrawing]. + LineInteractableDrawing({ + required LineDrawingToolConfig config, + required this.startPoint, + required this.endPoint, + }) : super(config: config); + + /// Start point of the line. + final EdgePoint startPoint; + + /// End point of the line. + final EdgePoint endPoint; +} diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index a6ba68087..f84ea7e68 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -99,4 +99,11 @@ class LineDrawingToolConfig extends DrawingToolConfig { ); } } + + @override + InteractableDrawing getInteractableDrawing() => LineInteractableDrawing( + config: this, + startPoint: edgePoints.first, + endPoint: edgePoints.last, + ); } diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart index f69bfa06d..16a2f0afa 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart @@ -68,6 +68,3 @@ class DrawingData { return false; } } - - -abstract class From 75f0bff36afc3e8dd07606cb24eed3130ac17ee0 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 10:10:20 +0800 Subject: [PATCH 007/311] WIP: add hitTest method to InteractableDrawing --- lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart | 8 ++++++++ .../deriv_chart/drawing_tool_chart/interactive_layer.dart | 2 ++ 2 files changed, 10 insertions(+) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index faa2aeb8a..f312239db 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -115,6 +115,9 @@ abstract class InteractableDrawing { /// The drawing tool config. final DrawingToolConfig config; + + /// Returns `true` if the drawing tool is hit by the given offset. + bool hitTest(Offset offset); } /// Interactable drawing for line drawing tool. @@ -131,4 +134,9 @@ class LineInteractableDrawing extends InteractableDrawing { /// End point of the line. final EdgePoint endPoint; + + @override + bool hitTest(Offset offset) { + throw UnimplementedError(); + } } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index a2e2f243b..692504ea2 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -84,6 +84,8 @@ class _InteractiveLayerState extends State { DraggableEdgePoint _draggableEndPoint = DraggableEdgePoint(); bool isTouchHeld = false; + InteractableDrawing? _selectedDrawing; + @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); From 5b1c087c9b9ca87d56dddfe203e55422f66e48c2 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 10:59:32 +0800 Subject: [PATCH 008/311] WIP: pass InteractableDrawings to the CustomPaint --- .../drawing_tool_chart/interactive_layer.dart | 134 ++++++------------ 1 file changed, 41 insertions(+), 93 deletions(-) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 692504ea2..49f92c411 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -55,11 +55,23 @@ class _InteractiveLayerState extends State { /// 4. This widget knows the current selected tool, will update its position when its interacted /// 5. the decision to make which tool is selected based on the user click and it's coordinate will happen here /// 6. + /// + + DraggableEdgePoint _draggableStartPoint = DraggableEdgePoint(); + DraggableEdgePoint _draggableMiddlePoint = DraggableEdgePoint(); + DraggableEdgePoint _draggableEndPoint = DraggableEdgePoint(); + bool isTouchHeld = false; + + InteractableDrawing? _selectedDrawing; + + List _interactableDrawings = []; @override void initState() { super.initState(); + _setDrawingsFromConfigs(); + // register the callback context.read() ..registerCallback(onPanUpdate) @@ -67,6 +79,23 @@ class _InteractiveLayerState extends State { ..registerCallback(onLongPressMoveUpdate); } + @override + void didUpdateWidget(covariant InteractiveLayer oldWidget) { + super.didUpdateWidget(oldWidget); + + _setDrawingsFromConfigs(); + } + + void _setDrawingsFromConfigs() { + _interactableDrawings.clear(); + + final Repository repo = + context.watch>(); + for (final config in repo.items) { + _interactableDrawings.add(config.getInteractableDrawing()); + } + } + void onPanUpdate(DragUpdateDetails details) { // handle pan update } @@ -79,37 +108,18 @@ class _InteractiveLayerState extends State { // handle long press move update } - DraggableEdgePoint _draggableStartPoint = DraggableEdgePoint(); - DraggableEdgePoint _draggableMiddlePoint = DraggableEdgePoint(); - DraggableEdgePoint _draggableEndPoint = DraggableEdgePoint(); - bool isTouchHeld = false; - - InteractableDrawing? _selectedDrawing; - @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); - - final Repository repo = - context.watch>(); - final List configs = repo.items.toList(); - - final List drawings = configs - .map((DrawingToolConfig config) => config.drawingData) - .toList(); - return Stack( fit: StackFit.expand, children: [ - ...drawings + ..._interactableDrawings .map((e) => CustomPaint( foregroundPainter: _DrawingPainter( - drawingData: e!, + drawing: e, series: widget.series, - config: repo.items - .where((DrawingToolConfig config) => - config.configId == e.id) - .first, + config: e.config, theme: context.watch(), chartConfig: widget.chartConfig, epochFromX: xAxis.epochFromX, @@ -167,7 +177,7 @@ class _InteractiveLayerState extends State { class _DrawingPainter extends CustomPainter { _DrawingPainter({ - required this.drawingData, + required this.drawing, required this.series, required this.config, required this.theme, @@ -190,7 +200,7 @@ class _DrawingPainter extends CustomPainter { this.setIsOverEndPoint, }); - final DrawingData drawingData; + final InteractableDrawing drawing; final DataSeries series; final DrawingToolConfig config; final ChartTheme theme; @@ -223,81 +233,19 @@ class _DrawingPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - for (final Drawing drawingPart in drawingData.drawingParts) { - YAxisConfig.instance.yAxisClipping(canvas, size, () { - drawingPart.onPaint( - canvas, - size, - theme, - epochFromX, - quoteFromY, - epochToX, - quoteToY, - config, - drawingData, - series, - updatePositionCallback, - draggableStartPoint, - draggableMiddlePoint: draggableMiddlePoint, - draggableEndPoint: draggableEndPoint, - ); - }); - - drawingPart.onLabelPaint( - canvas, - size, - theme, - chartConfig, - epochFromX, - quoteFromY, - epochToX, - quoteToY, - config, - drawingData, - series, - ); - } + YAxisConfig.instance.yAxisClipping(canvas, size, () { + // TODO(NA): Paint the [drawing] + }); } @override - bool shouldRepaint(_DrawingPainter oldDelegate) => drawingData.shouldRepaint( - oldDelegate.drawingData, - leftEpoch, - rightEpoch, - draggableStartPoint, - draggableEndPoint: draggableEndPoint, - ); + bool shouldRepaint(_DrawingPainter oldDelegate) => + // TODO(NA): Return true/false based on the [drawing] state + true; @override bool shouldRebuildSemantics(_DrawingPainter oldDelegate) => false; @override - bool hitTest(Offset position) { - for (final Drawing drawingPart in drawingData.drawingParts) { - if (drawingPart.hitTest( - position, - epochToX, - quoteToY, - config, - draggableStartPoint, - setIsOverStartPoint, - draggableMiddlePoint: draggableMiddlePoint, - draggableEndPoint: draggableEndPoint, - setIsOverMiddlePoint: setIsOverMiddlePoint, - setIsOverEndPoint: setIsOverEndPoint, - )) { - onDrawingToolClicked(drawingData); - return true; - } - return false; - } - - if (!isTouchHeld && drawingData.isDrawingFinished) { - /// For deselecting the drawing when tapping outside of the drawing. - drawingData - ..isSelected = false - ..isHovered = false; - } - return false; - } + bool hitTest(Offset position) => drawing.hitTest(position); } From 178c4b027e1ca418ca1615a90ede79ab6c7fdd3c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 12:08:21 +0800 Subject: [PATCH 009/311] WIP: sample painting of line drawing --- .../drawing_tools_ui/drawing_tool_config.dart | 27 +++++++- .../drawing_tool_chart/interactive_layer.dart | 63 +++++++++++-------- 2 files changed, 62 insertions(+), 28 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index f312239db..7811714d4 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -118,6 +118,14 @@ abstract class InteractableDrawing { /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset); + + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ); } /// Interactable drawing for line drawing tool. @@ -137,6 +145,23 @@ class LineInteractableDrawing extends InteractableDrawing { @override bool hitTest(Offset offset) { - throw UnimplementedError(); + return false; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ) { + canvas.drawLine( + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)), + Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)), + Paint() + ..color = Colors.red + ..strokeWidth = 2, + ); } } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 49f92c411..1429e2f62 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -1,11 +1,10 @@ -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_series/data_series.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.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/data_model/point.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -13,7 +12,8 @@ import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; -import '../chart/data_visualization/drawing_tools/drawing_data.dart'; +import '../chart/data_visualization/chart_data.dart'; +import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../chart/y_axis/y_axis_config.dart'; import 'drawing_tools.dart'; @@ -21,8 +21,8 @@ import 'drawing_tools.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. class InteractiveLayer extends StatefulWidget { + /// Initializes the interactive layer. const InteractiveLayer({ - super.key, required this.drawingTools, required this.series, required this.chartConfig, @@ -30,13 +30,25 @@ class InteractiveLayer extends StatefulWidget { required this.quoteFromCanvasY, required this.epochToCanvasX, this.selectedDrawingTool, + super.key, }); + /// Drawing tools. final DrawingTools drawingTools; + + /// Main Chart series final DataSeries series; + + /// Chart configuration final ChartConfig chartConfig; + + /// Converts quote to canvas Y coordinate. final QuoteToY quoteToCanvasY; + + /// Converts canvas Y coordinate to quote. final QuoteFromY quoteFromCanvasY; + + /// Converts epoch to canvas X coordinate. final EpochToX epochToCanvasX; /// Selected drawing tool. @@ -56,22 +68,14 @@ class _InteractiveLayerState extends State { /// 5. the decision to make which tool is selected based on the user click and it's coordinate will happen here /// 6. /// - - DraggableEdgePoint _draggableStartPoint = DraggableEdgePoint(); - DraggableEdgePoint _draggableMiddlePoint = DraggableEdgePoint(); - DraggableEdgePoint _draggableEndPoint = DraggableEdgePoint(); - bool isTouchHeld = false; - InteractableDrawing? _selectedDrawing; - List _interactableDrawings = []; + final List _interactableDrawings = []; @override void initState() { super.initState(); - _setDrawingsFromConfigs(); - // register the callback context.read() ..registerCallback(onPanUpdate) @@ -79,6 +83,13 @@ class _InteractiveLayerState extends State { ..registerCallback(onLongPressMoveUpdate); } + @override + void didChangeDependencies() { + super.didChangeDependencies(); + + _setDrawingsFromConfigs(); + } + @override void didUpdateWidget(covariant InteractiveLayer oldWidget) { super.didUpdateWidget(oldWidget); @@ -126,11 +137,7 @@ class _InteractiveLayerState extends State { epochToX: xAxis.xFromEpoch, quoteToY: widget.quoteToCanvasY, quoteFromY: widget.quoteFromCanvasY, - draggableStartPoint: _draggableStartPoint, - draggableMiddlePoint: _draggableMiddlePoint, - isTouchHeld: isTouchHeld, isDrawingToolSelected: widget.selectedDrawingTool != null, - draggableEndPoint: _draggableEndPoint, leftEpoch: xAxis.leftBoundEpoch, rightEpoch: xAxis.rightBoundEpoch, onDrawingToolClicked: (DrawingData drawingData) { @@ -186,16 +193,12 @@ class _DrawingPainter extends CustomPainter { required this.epochToX, required this.quoteToY, required this.quoteFromY, - required this.draggableStartPoint, required this.setIsOverStartPoint, required this.updatePositionCallback, required this.leftEpoch, required this.rightEpoch, required this.onDrawingToolClicked, this.isDrawingToolSelected = false, - this.isTouchHeld = false, - this.draggableMiddlePoint, - this.draggableEndPoint, this.setIsOverMiddlePoint, this.setIsOverEndPoint, }); @@ -206,13 +209,9 @@ class _DrawingPainter extends CustomPainter { final ChartTheme theme; final ChartConfig chartConfig; final bool isDrawingToolSelected; - final bool isTouchHeld; final int Function(double x) epochFromX; final double Function(int x) epochToX; final double Function(double y) quoteToY; - final DraggableEdgePoint draggableStartPoint; - final DraggableEdgePoint? draggableMiddlePoint; - final DraggableEdgePoint? draggableEndPoint; final void Function({required bool isOverPoint}) setIsOverStartPoint; final void Function({required bool isOverPoint})? setIsOverMiddlePoint; final void Function({required bool isOverPoint})? setIsOverEndPoint; @@ -234,6 +233,13 @@ class _DrawingPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { YAxisConfig.instance.yAxisClipping(canvas, size, () { + drawing.paint( + canvas, + size, + epochToX, + quoteToY, + const AnimationInfo(), + ); // TODO(NA): Paint the [drawing] }); } @@ -247,5 +253,8 @@ class _DrawingPainter extends CustomPainter { bool shouldRebuildSemantics(_DrawingPainter oldDelegate) => false; @override - bool hitTest(Offset position) => drawing.hitTest(position); + bool hitTest(Offset position) { + print('#### hitTest $position'); + return drawing.hitTest(position); + } } From 984d8b7ecb4cfb8520d2ba287b2f4b46aa27ec70 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 12:27:14 +0800 Subject: [PATCH 010/311] WIP: implement hitTest for LineInteractableDrawing --- .../drawing_tools_ui/drawing_tool_config.dart | 44 +++++++++++++++++-- .../drawing_tool_chart/interactive_layer.dart | 2 +- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 7811714d4..7162c062f 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -117,7 +117,7 @@ abstract class InteractableDrawing { final DrawingToolConfig config; /// Returns `true` if the drawing tool is hit by the given offset. - bool hitTest(Offset offset); + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); void paint( Canvas canvas, @@ -144,8 +144,46 @@ class LineInteractableDrawing extends InteractableDrawing { final EdgePoint endPoint; @override - bool hitTest(Offset offset) { - return false; + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + // Convert start and end points from epoch/quote to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint.epoch), + quoteToY(startPoint.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint.epoch), + quoteToY(endPoint.quote), + ); + + // Calculate line length + final double lineLength = (endOffset - startOffset).distance; + + // If line length is too small, treat it as a point + if (lineLength < 1) { + return (offset - startOffset).distance <= 8; + } + + // Calculate perpendicular distance from point to line + // Formula: |((y2-y1)x - (x2-x1)y + x2y1 - y2x1)| / sqrt((y2-y1)² + (x2-x1)²) + final double distance = ((endOffset.dy - startOffset.dy) * offset.dx - + (endOffset.dx - startOffset.dx) * offset.dy + + endOffset.dx * startOffset.dy - + endOffset.dy * startOffset.dx) + .abs() / + lineLength; + + // Check if point is within the line segment (not just the infinite line) + final double dotProduct = + (offset.dx - startOffset.dx) * (endOffset.dx - startOffset.dx) + + (offset.dy - startOffset.dy) * (endOffset.dy - startOffset.dy); + + final bool isWithinRange = + dotProduct >= 0 && dotProduct <= lineLength * lineLength; + + final result = isWithinRange && distance <= 8; + print('Hit the line? $result'); + // Return true if within range and close enough to line (8 pixel margin) + return result; } @override diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 1429e2f62..4d761e9bf 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -255,6 +255,6 @@ class _DrawingPainter extends CustomPainter { @override bool hitTest(Offset position) { print('#### hitTest $position'); - return drawing.hitTest(position); + return drawing.hitTest(position, epochToX, quoteToY); } } From 33e9365c85cd1c07d48851e69c53a055fa928669 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 13:18:12 +0800 Subject: [PATCH 011/311] trigger click callback on drawing --- .../drawing_tool_chart/interactive_layer.dart | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 4d761e9bf..3fa5fc047 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -140,13 +140,9 @@ class _InteractiveLayerState extends State { isDrawingToolSelected: widget.selectedDrawingTool != null, leftEpoch: xAxis.leftBoundEpoch, rightEpoch: xAxis.rightBoundEpoch, - onDrawingToolClicked: (DrawingData drawingData) { - print('#### onDrawingToolClicked ${drawingData.id}'); - // if (widget.selectedDrawingTool != null && - // widget.selectedDrawingTool!.configId != e.id) { - // widget.drawingTools.clearDrawingToolSelection(); - // } - // widget.drawingTools.onMouseEnter(e.id); + onDrawingToolClicked: () { + print('Drawing tool clicked ${e.config.configId}'); + _selectedDrawing = e; }, updatePositionCallback: ( EdgePoint edgePoint, @@ -228,7 +224,7 @@ class _DrawingPainter extends CustomPainter { double Function(double) quoteFromY; - final Function(DrawingData) onDrawingToolClicked; + final Function() onDrawingToolClicked; @override void paint(Canvas canvas, Size size) { @@ -254,7 +250,10 @@ class _DrawingPainter extends CustomPainter { @override bool hitTest(Offset position) { - print('#### hitTest $position'); - return drawing.hitTest(position, epochToX, quoteToY); + if (drawing.hitTest(position, epochToX, quoteToY)) { + onDrawingToolClicked(); + return true; + } + return false; } } From 2c009464f1e6ef680ca69b0a4b324542a5668412 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 13:28:09 +0800 Subject: [PATCH 012/311] providing the callback to check if a drawing is selected --- .../drawing_tools_ui/drawing_tool_config.dart | 4 ++++ .../drawing_tool_chart/interactive_layer.dart | 12 ++++++++++++ 2 files changed, 16 insertions(+) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 7162c062f..a83de92c6 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_model/point.dart'; +import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/interactive_layer.dart'; import 'package:flutter/material.dart'; /// Drawing tools config @@ -119,12 +120,14 @@ abstract class InteractableDrawing { /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); + /// Paints the drawing tool on the chart. void paint( Canvas canvas, Size size, EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + IsDrawingSelected isDrawingSelected, ); } @@ -193,6 +196,7 @@ class LineInteractableDrawing extends InteractableDrawing { EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + IsDrawingSelected isDrawingSelected, ) { canvas.drawLine( Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)), diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 3fa5fc047..72974f67c 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -119,6 +119,9 @@ class _InteractiveLayerState extends State { // handle long press move update } + bool _isDrawingSelected(InteractableDrawing drawing) => + drawing == _selectedDrawing; + @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); @@ -138,6 +141,7 @@ class _InteractiveLayerState extends State { quoteToY: widget.quoteToCanvasY, quoteFromY: widget.quoteFromCanvasY, isDrawingToolSelected: widget.selectedDrawingTool != null, + isSelected: _isDrawingSelected, leftEpoch: xAxis.leftBoundEpoch, rightEpoch: xAxis.rightBoundEpoch, onDrawingToolClicked: () { @@ -178,6 +182,9 @@ class _InteractiveLayerState extends State { } } +/// A callback which calling it should return if the [drawing] is selected. +typedef IsDrawingSelected = bool Function(InteractableDrawing drawing); + class _DrawingPainter extends CustomPainter { _DrawingPainter({ required this.drawing, @@ -194,6 +201,7 @@ class _DrawingPainter extends CustomPainter { required this.leftEpoch, required this.rightEpoch, required this.onDrawingToolClicked, + required this.isSelected, this.isDrawingToolSelected = false, this.setIsOverMiddlePoint, this.setIsOverEndPoint, @@ -226,6 +234,9 @@ class _DrawingPainter extends CustomPainter { final Function() onDrawingToolClicked; + /// Returns `true` if the drawing tool is selected. + final bool Function(InteractableDrawing) isSelected; + @override void paint(Canvas canvas, Size size) { YAxisConfig.instance.yAxisClipping(canvas, size, () { @@ -235,6 +246,7 @@ class _DrawingPainter extends CustomPainter { epochToX, quoteToY, const AnimationInfo(), + isSelected, ); // TODO(NA): Paint the [drawing] }); From 8fa003158ed498b1ab21f990a7f8738fdbbc64e3 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 13:48:26 +0800 Subject: [PATCH 013/311] Glowing effect for the selected drawing when painting it --- .../drawing_tools_ui/drawing_tool_config.dart | 41 +++++++++++++++---- .../drawing_tool_chart/interactive_layer.dart | 2 +- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index a83de92c6..fc444ec49 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -2,6 +2,7 @@ import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_tool_label_painter.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/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/data_model/point.dart'; @@ -198,12 +199,38 @@ class LineInteractableDrawing extends InteractableDrawing { AnimationInfo animationInfo, IsDrawingSelected isDrawingSelected, ) { - canvas.drawLine( - Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)), - Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)), - Paint() - ..color = Colors.red - ..strokeWidth = 2, - ); + final config = this.config as LineDrawingToolConfig; + final LineStyle lineStyle = config.lineStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + + final Offset startOffset = + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); + final Offset endOffset = + Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); + + // Check if this drawing is selected + final bool isCurrentlySelected = isDrawingSelected(this); + + // Use glowy paint style if selected, otherwise use normal paint style + final Paint paint = isCurrentlySelected + ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) + : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); + + canvas.drawLine(startOffset, endOffset, paint); + + // Draw endpoints with glowy effect if selected + if (isCurrentlySelected) { + final double markerRadius = 5; + canvas.drawCircle( + startOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); + canvas.drawCircle( + endOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); + } } } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 72974f67c..614dc6873 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -120,7 +120,7 @@ class _InteractiveLayerState extends State { } bool _isDrawingSelected(InteractableDrawing drawing) => - drawing == _selectedDrawing; + drawing.config.configId == _selectedDrawing?.config.configId; @override Widget build(BuildContext context) { From 5e4aab5a4c18de8ad662ca5e5abde38aeb2f9e93 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 14:09:03 +0800 Subject: [PATCH 014/311] clear selected drawing when tapping on the empty area --- .../drawing_tool_chart/interactive_layer.dart | 22 +++++++++++++++++++ specs/interactive_layer.md | 0 2 files changed, 22 insertions(+) delete mode 100644 specs/interactive_layer.md diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 614dc6873..92b9d8b78 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -80,6 +80,7 @@ class _InteractiveLayerState extends State { context.read() ..registerCallback(onPanUpdate) ..registerCallback(onLongPressStart) + ..registerCallback(onTap) ..registerCallback(onLongPressMoveUpdate); } @@ -111,6 +112,27 @@ class _InteractiveLayerState extends State { // handle pan update } + void onTap(TapUpDetails details) { + bool anyDrawingHit = false; + for (final drawing in _interactableDrawings) { + if (drawing.hitTest( + details.localPosition, + widget.epochToCanvasX, + widget.quoteToCanvasY, + )) { + anyDrawingHit = true; + break; + } + } + + // If no drawing was hit, clear the selection + if (!anyDrawingHit) { + setState(() { + _selectedDrawing = null; + }); + } + } + void onLongPressStart(LongPressStartDetails details) { // handle long press start } diff --git a/specs/interactive_layer.md b/specs/interactive_layer.md deleted file mode 100644 index e69de29bb..000000000 From 3591a9b5797479693c0e4e9bf9e720e20c23e3e3 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 14:34:02 +0800 Subject: [PATCH 015/311] code cleanup :recycle: --- .../drawing_tools_ui/drawing_tool_config.dart | 24 +++++++++---------- .../drawing_tool_chart/interactive_layer.dart | 8 ------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index fc444ec49..79f3c69ec 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -185,7 +185,6 @@ class LineInteractableDrawing extends InteractableDrawing { dotProduct >= 0 && dotProduct <= lineLength * lineLength; final result = isWithinRange && distance <= 8; - print('Hit the line? $result'); // Return true if within range and close enough to line (8 pixel margin) return result; } @@ -220,17 +219,18 @@ class LineInteractableDrawing extends InteractableDrawing { // Draw endpoints with glowy effect if selected if (isCurrentlySelected) { - final double markerRadius = 5; - canvas.drawCircle( - startOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); - canvas.drawCircle( - endOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); + const double markerRadius = 5; + canvas + ..drawCircle( + startOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ) + ..drawCircle( + endOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); } } } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 92b9d8b78..d86680ba7 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -3,7 +3,6 @@ import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.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/data_model/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/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; @@ -84,13 +83,6 @@ class _InteractiveLayerState extends State { ..registerCallback(onLongPressMoveUpdate); } - @override - void didChangeDependencies() { - super.didChangeDependencies(); - - _setDrawingsFromConfigs(); - } - @override void didUpdateWidget(covariant InteractiveLayer oldWidget) { super.didUpdateWidget(oldWidget); From 9add1d53a0e763966f912705001946b320a2943f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 14:37:47 +0800 Subject: [PATCH 016/311] remove setting drawings on didUpdateWidget --- lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index d86680ba7..fda52b1a4 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -84,8 +84,8 @@ class _InteractiveLayerState extends State { } @override - void didUpdateWidget(covariant InteractiveLayer oldWidget) { - super.didUpdateWidget(oldWidget); + void didChangeDependencies() { + super.didChangeDependencies(); _setDrawingsFromConfigs(); } From 7a943034a9a5fdb567f26c0612e5753c03bfca5c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 14:49:58 +0800 Subject: [PATCH 017/311] WIP: adding onDragUpdate to InteractableDrawing --- .../drawing_tools_ui/drawing_tool_config.dart | 27 +++++++++++++++++-- lib/src/deriv_chart/chart/main_chart.dart | 1 + .../drawing_tool_chart/interactive_layer.dart | 14 +++++++--- 3 files changed, 37 insertions(+), 5 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 79f3c69ec..ea5deda5c 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -121,6 +121,20 @@ abstract class InteractableDrawing { /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); + /// Called when the drawing tool is dragged and updates the drawing position + /// properties based on the dragging [details]. + /// + /// Each drawing will know how to handle and update itself accordingly based + /// on where the dragging position is like if it's dragging a point or a line + /// of the tool. + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ); + /// Paints the drawing tool on the chart. void paint( Canvas canvas, @@ -142,10 +156,10 @@ class LineInteractableDrawing extends InteractableDrawing { }) : super(config: config); /// Start point of the line. - final EdgePoint startPoint; + EdgePoint startPoint; /// End point of the line. - final EdgePoint endPoint; + EdgePoint endPoint; @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { @@ -233,4 +247,13 @@ class LineInteractableDrawing extends InteractableDrawing { ); } } + + @override + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} } diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 6564252a8..2e4cccf1d 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -360,6 +360,7 @@ class _ChartImplementationState extends BasicChartState { quoteToCanvasY: chartQuoteToCanvasY, epochToCanvasX: xAxis.xFromEpoch, quoteFromCanvasY: chartQuoteFromCanvasY, + epochFromCanvasX: xAxis.epochFromX, ), if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index fda52b1a4..20ff2a009 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -28,6 +28,7 @@ class InteractiveLayer extends StatefulWidget { required this.quoteToCanvasY, required this.quoteFromCanvasY, required this.epochToCanvasX, + required this.epochFromCanvasX, this.selectedDrawingTool, super.key, }); @@ -47,6 +48,9 @@ class InteractiveLayer extends StatefulWidget { /// Converts canvas Y coordinate to quote. final QuoteFromY quoteFromCanvasY; + /// Converts canvas X coordinate to epoch. + final EpochFromX epochFromCanvasX; + /// Converts epoch to canvas X coordinate. final EpochToX epochToCanvasX; @@ -100,9 +104,13 @@ class _InteractiveLayerState extends State { } } - void onPanUpdate(DragUpdateDetails details) { - // handle pan update - } + void onPanUpdate(DragUpdateDetails details) => _selectedDrawing?.onDragUpdate( + details, + widget.epochFromCanvasX, + widget.quoteFromCanvasY, + widget.epochToCanvasX, + widget.quoteToCanvasY, + ); void onTap(TapUpDetails details) { bool anyDrawingHit = false; From c65d795429ebd64ddad4c6a7f56265d334468d09 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 15:02:45 +0800 Subject: [PATCH 018/311] WIP: move the tool on drag and save on storage --- .../drawing_tools_ui/drawing_tool_config.dart | 42 ++++++++++- .../drawing_tool_chart/interactive_layer.dart | 74 +++++++++++++++++-- 2 files changed, 108 insertions(+), 8 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index ea5deda5c..d79bf1990 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -255,5 +255,45 @@ class LineInteractableDrawing extends InteractableDrawing { QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - ) {} + ) { + // Get the drag delta in screen coordinates + final Offset delta = details.delta; + + // Convert start and end points to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint.epoch), + quoteToY(startPoint.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint.epoch), + quoteToY(endPoint.quote), + ); + + // Apply the delta to get new screen coordinates + final Offset newStartOffset = startOffset + delta; + final Offset newEndOffset = endOffset + delta; + + // Convert back to epoch and quote coordinates + final int newStartEpoch = epochFromX(newStartOffset.dx); + final double newStartQuote = quoteFromY(newStartOffset.dy); + final int newEndEpoch = epochFromX(newEndOffset.dx); + final double newEndQuote = quoteFromY(newEndOffset.dy); + + // Update the start and end points + startPoint = EdgePoint( + epoch: newStartEpoch, + quote: newStartQuote, + ); + endPoint = EdgePoint( + epoch: newEndEpoch, + quote: newEndQuote, + ); + + // Note: The actual config update should be handled by the InteractiveLayer + // which has access to the Repository. This method only updates the local + // startPoint and endPoint properties, which will be reflected in the drawing. + // + // The InteractiveLayer should periodically check if the selected drawing's + // points have changed and update the config in the repository accordingly. + } } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 20ff2a009..0219e62d5 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -104,13 +104,73 @@ class _InteractiveLayerState extends State { } } - void onPanUpdate(DragUpdateDetails details) => _selectedDrawing?.onDragUpdate( - details, - widget.epochFromCanvasX, - widget.quoteFromCanvasY, - widget.epochToCanvasX, - widget.quoteToCanvasY, - ); + void onPanUpdate(DragUpdateDetails details) { + if (_selectedDrawing == null) { + return; + } + + // Store the original points before update + final originalPoints = _getDrawingPoints(_selectedDrawing!); + + // Update the drawing + _selectedDrawing!.onDragUpdate( + details, + widget.epochFromCanvasX, + widget.quoteFromCanvasY, + widget.epochToCanvasX, + widget.quoteToCanvasY, + ); + + // Check if points have changed and update the config in the repository + final updatedPoints = _getDrawingPoints(_selectedDrawing!); + if (_havePointsChanged(originalPoints, updatedPoints)) { + _updateConfigInRepository(_selectedDrawing!); + } + } + + /// Gets the points from a drawing (specific to each drawing type) + List _getDrawingPoints(InteractableDrawing drawing) { + if (drawing is LineInteractableDrawing) { + return [drawing.startPoint, drawing.endPoint]; + } + // Add cases for other drawing types as needed + return []; + } + + /// Checks if points have changed + bool _havePointsChanged(List original, List updated) { + if (original.length != updated.length) return true; + + for (int i = 0; i < original.length; i++) { + if (original[i].epoch != updated[i].epoch || + original[i].quote != updated[i].quote) { + return true; + } + } + + return false; + } + + /// Updates the config in the repository + void _updateConfigInRepository(InteractableDrawing drawing) { + final Repository repo = + context.read>(); + + // Find the index of the config in the repository + final int index = repo.items.indexWhere( + (config) => config.configId == drawing.config.configId + ); + + if (index == -1) return; // Config not found + + // Create a new config with updated edge points + final updatedConfig = drawing.config.copyWith( + edgePoints: _getDrawingPoints(drawing), + ); + + // Update the config in the repository + repo.updateAt(index, updatedConfig); + } void onTap(TapUpDetails details) { bool anyDrawingHit = false; From 77d3c72b7852b622edbb011568eee91e3f4837b7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 15:36:35 +0800 Subject: [PATCH 019/311] apply debounce --- .../drawing_tools_ui/drawing_tool_config.dart | 10 +- .../line/line_drawing_tool_config.dart | 5 +- .../drawing_tool_chart/interactive_layer.dart | 96 +++++++++++++------ 3 files changed, 78 insertions(+), 33 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index d79bf1990..d7ba1dea2 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -258,7 +258,7 @@ class LineInteractableDrawing extends InteractableDrawing { ) { // Get the drag delta in screen coordinates final Offset delta = details.delta; - + // Convert start and end points to screen coordinates final Offset startOffset = Offset( epochToX(startPoint.epoch), @@ -268,17 +268,17 @@ class LineInteractableDrawing extends InteractableDrawing { epochToX(endPoint.epoch), quoteToY(endPoint.quote), ); - + // Apply the delta to get new screen coordinates final Offset newStartOffset = startOffset + delta; final Offset newEndOffset = endOffset + delta; - + // Convert back to epoch and quote coordinates final int newStartEpoch = epochFromX(newStartOffset.dx); final double newStartQuote = quoteFromY(newStartOffset.dy); final int newEndEpoch = epochFromX(newEndOffset.dx); final double newEndQuote = quoteFromY(newEndOffset.dy); - + // Update the start and end points startPoint = EdgePoint( epoch: newStartEpoch, @@ -288,7 +288,7 @@ class LineInteractableDrawing extends InteractableDrawing { epoch: newEndEpoch, quote: newEndQuote, ); - + // Note: The actual config update should be handled by the InteractiveLayer // which has access to the Repository. This method only updates the local // startPoint and endPoint properties, which will be reflected in the drawing. diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index f84ea7e68..643e1e3de 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -101,9 +101,12 @@ class LineDrawingToolConfig extends DrawingToolConfig { } @override - InteractableDrawing getInteractableDrawing() => LineInteractableDrawing( + InteractableDrawing getInteractableDrawing() { + print('Created LineInteractableDrawing ${DateTime.now()}'); + return LineInteractableDrawing( config: this, startPoint: edgePoints.first, endPoint: edgePoints.last, ); + } } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 0219e62d5..2b3694f03 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -1,3 +1,5 @@ +import 'dart:async'; + import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.dart'; @@ -75,6 +77,12 @@ class _InteractiveLayerState extends State { final List _interactableDrawings = []; + /// Timer for debouncing repository updates + Timer? _debounceTimer; + + /// Duration for debouncing repository updates (300ms is a good balance) + static const Duration _debounceDuration = Duration(milliseconds: 300); + @override void initState() { super.initState(); @@ -108,10 +116,10 @@ class _InteractiveLayerState extends State { if (_selectedDrawing == null) { return; } - + // Store the original points before update final originalPoints = _getDrawingPoints(_selectedDrawing!); - + // Update the drawing _selectedDrawing!.onDragUpdate( details, @@ -120,14 +128,25 @@ class _InteractiveLayerState extends State { widget.epochToCanvasX, widget.quoteToCanvasY, ); - + + setState(() { + if (_interactableDrawings.isNotEmpty) { + final fromDrawings = + _interactableDrawings.first as LineInteractableDrawing; + final selectedOne = _selectedDrawing as LineInteractableDrawing; + + print( + 'fromDrawings: ${fromDrawings.startPoint.quote} SelectedOne: ${selectedOne.startPoint.quote}, (${fromDrawings.hashCode}, ${selectedOne.hashCode})'); + } + }); + // Check if points have changed and update the config in the repository final updatedPoints = _getDrawingPoints(_selectedDrawing!); if (_havePointsChanged(originalPoints, updatedPoints)) { _updateConfigInRepository(_selectedDrawing!); } } - + /// Gets the points from a drawing (specific to each drawing type) List _getDrawingPoints(InteractableDrawing drawing) { if (drawing is LineInteractableDrawing) { @@ -136,40 +155,63 @@ class _InteractiveLayerState extends State { // Add cases for other drawing types as needed return []; } - + /// Checks if points have changed bool _havePointsChanged(List original, List updated) { - if (original.length != updated.length) return true; - + if (original.length != updated.length) { + return true; + } + for (int i = 0; i < original.length; i++) { if (original[i].epoch != updated[i].epoch || original[i].quote != updated[i].quote) { return true; } } - + return false; } - - /// Updates the config in the repository + + /// Updates the config in the repository with debouncing void _updateConfigInRepository(InteractableDrawing drawing) { - final Repository repo = - context.read>(); - - // Find the index of the config in the repository - final int index = repo.items.indexWhere( - (config) => config.configId == drawing.config.configId - ); - - if (index == -1) return; // Config not found - - // Create a new config with updated edge points - final updatedConfig = drawing.config.copyWith( - edgePoints: _getDrawingPoints(drawing), - ); - - // Update the config in the repository - repo.updateAt(index, updatedConfig); + // Cancel any existing timer + _debounceTimer?.cancel(); + + // Create a new timer + _debounceTimer = Timer(_debounceDuration, () { + // Only proceed if the widget is still mounted + if (!mounted) { + return; + } + + final Repository repo = + context.read>(); + + // Find the index of the config in the repository + final int index = repo.items + .indexWhere((config) => config.configId == drawing.config.configId); + + if (index == -1) { + return; // Config not found + } + + // Create a new config with updated edge points + final updatedConfig = drawing.config.copyWith( + edgePoints: _getDrawingPoints(drawing), + ); + + // Update the config in the repository + repo.updateAt(index, updatedConfig); + + print('Repository updated with debounce'); + }); + } + + @override + void dispose() { + // Cancel the debounce timer when the widget is disposed + _debounceTimer?.cancel(); + super.dispose(); } void onTap(TapUpDetails details) { From b0bd5e3b1f0104ab56c43954bff872769914f15f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 16:03:50 +0800 Subject: [PATCH 020/311] set Drawings inside initState --- .../line/line_drawing_tool_config.dart | 5 +--- .../deriv_chart/chart/chart_state_mobile.dart | 2 ++ lib/src/deriv_chart/chart/main_chart.dart | 2 ++ .../drawing_tool_chart/interactive_layer.dart | 24 +++++++------------ 4 files changed, 14 insertions(+), 19 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index 643e1e3de..f84ea7e68 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -101,12 +101,9 @@ class LineDrawingToolConfig extends DrawingToolConfig { } @override - InteractableDrawing getInteractableDrawing() { - print('Created LineInteractableDrawing ${DateTime.now()}'); - return LineInteractableDrawing( + InteractableDrawing getInteractableDrawing() => LineInteractableDrawing( config: this, startPoint: edgePoints.first, endPoint: edgePoints.last, ); - } } diff --git a/lib/src/deriv_chart/chart/chart_state_mobile.dart b/lib/src/deriv_chart/chart/chart_state_mobile.dart index 5f6c6462a..61edfb8de 100644 --- a/lib/src/deriv_chart/chart/chart_state_mobile.dart +++ b/lib/src/deriv_chart/chart/chart_state_mobile.dart @@ -9,6 +9,8 @@ class _ChartStateMobile extends _ChartState { _bottomSectionHeight = _getBottomIndicatorsSectionHeightFraction(widget.bottomConfigs.length); + + print('#### ChartStateMobile initState ${DateTime.now()}'); } @override diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 2e4cccf1d..468b137d3 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -178,6 +178,8 @@ class _ChartImplementationState extends BasicChartState { verticalPaddingFraction = widget.verticalPaddingFraction!; } + print('#### InteractiveLayer MainChart ${DateTime.now()}'); + _setupController(); } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 2b3694f03..92b740c05 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -87,6 +87,8 @@ class _InteractiveLayerState extends State { void initState() { super.initState(); + _setDrawingsFromConfigs(); + // register the callback context.read() ..registerCallback(onPanUpdate) @@ -95,20 +97,15 @@ class _InteractiveLayerState extends State { ..registerCallback(onLongPressMoveUpdate); } - @override - void didChangeDependencies() { - super.didChangeDependencies(); - - _setDrawingsFromConfigs(); - } - void _setDrawingsFromConfigs() { - _interactableDrawings.clear(); + if (widget.drawingTools.drawingToolsRepo != null) { + _interactableDrawings.clear(); - final Repository repo = - context.watch>(); - for (final config in repo.items) { - _interactableDrawings.add(config.getInteractableDrawing()); + final Repository repo = + widget.drawingTools.drawingToolsRepo!; + for (final config in repo.items) { + _interactableDrawings.add(config.getInteractableDrawing()); + } } } @@ -202,8 +199,6 @@ class _InteractiveLayerState extends State { // Update the config in the repository repo.updateAt(index, updatedConfig); - - print('Repository updated with debounce'); }); } @@ -269,7 +264,6 @@ class _InteractiveLayerState extends State { leftEpoch: xAxis.leftBoundEpoch, rightEpoch: xAxis.rightBoundEpoch, onDrawingToolClicked: () { - print('Drawing tool clicked ${e.config.configId}'); _selectedDrawing = e; }, updatePositionCallback: ( From bd437661241f7ce824839b4916e7e3c5c46308b7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 16:29:11 +0800 Subject: [PATCH 021/311] fix the issue of tools not updating on drag --- lib/src/add_ons/add_ons_repository.dart | 2 ++ lib/src/deriv_chart/chart/main_chart.dart | 4 ++++ .../drawing_tool_chart/interactive_layer.dart | 21 +++++++++---------- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/lib/src/add_ons/add_ons_repository.dart b/lib/src/add_ons/add_ons_repository.dart index 5a877118e..ee2c40b5b 100644 --- a/lib/src/add_ons/add_ons_repository.dart +++ b/lib/src/add_ons/add_ons_repository.dart @@ -73,6 +73,8 @@ class AddOnsRepository extends ChangeNotifier items.add(addOnConfig); _hiddenStatus.add(false); } + + notifyListeners(); } /// Adds a new indicator or drawing tool and updates storage. diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 468b137d3..3eee46970 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -1,4 +1,6 @@ import 'package:collection/collection.dart' show IterableExtension; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/interactive_layer.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; @@ -358,6 +360,8 @@ class _ChartImplementationState extends BasicChartState { InteractiveLayer( drawingTools: widget.drawingTools!, series: widget.mainSeries as DataSeries, + drawingToolsRepo: + context.watch>(), chartConfig: context.watch(), quoteToCanvasY: chartQuoteToCanvasY, epochToCanvasX: xAxis.xFromEpoch, diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 92b740c05..83f6612fe 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -31,6 +31,7 @@ class InteractiveLayer extends StatefulWidget { required this.quoteFromCanvasY, required this.epochToCanvasX, required this.epochFromCanvasX, + required this.drawingToolsRepo, this.selectedDrawingTool, super.key, }); @@ -38,6 +39,9 @@ class InteractiveLayer extends StatefulWidget { /// Drawing tools. final DrawingTools drawingTools; + /// Drawing tools repo. + final Repository drawingToolsRepo; + /// Main Chart series final DataSeries series; @@ -87,7 +91,7 @@ class _InteractiveLayerState extends State { void initState() { super.initState(); - _setDrawingsFromConfigs(); + widget.drawingToolsRepo.addListener(_setDrawingsFromConfigs); // register the callback context.read() @@ -98,14 +102,10 @@ class _InteractiveLayerState extends State { } void _setDrawingsFromConfigs() { - if (widget.drawingTools.drawingToolsRepo != null) { - _interactableDrawings.clear(); + _interactableDrawings.clear(); - final Repository repo = - widget.drawingTools.drawingToolsRepo!; - for (final config in repo.items) { - _interactableDrawings.add(config.getInteractableDrawing()); - } + for (final config in widget.drawingToolsRepo.items) { + _interactableDrawings.add(config.getInteractableDrawing()); } } @@ -131,9 +131,6 @@ class _InteractiveLayerState extends State { final fromDrawings = _interactableDrawings.first as LineInteractableDrawing; final selectedOne = _selectedDrawing as LineInteractableDrawing; - - print( - 'fromDrawings: ${fromDrawings.startPoint.quote} SelectedOne: ${selectedOne.startPoint.quote}, (${fromDrawings.hashCode}, ${selectedOne.hashCode})'); } }); @@ -206,6 +203,8 @@ class _InteractiveLayerState extends State { void dispose() { // Cancel the debounce timer when the widget is disposed _debounceTimer?.cancel(); + + widget.drawingToolsRepo.removeListener(_setDrawingsFromConfigs); super.dispose(); } From 1b2bfb4452e0ede45971ec01145db4f6dfb831c0 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 17:56:47 +0800 Subject: [PATCH 022/311] use GestureDetector in InteractiveLayer --- .../drawing_tool_chart/interactive_layer.dart | 137 +++++++++++------- 1 file changed, 82 insertions(+), 55 deletions(-) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 83f6612fe..b76da13b9 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -81,6 +81,8 @@ class _InteractiveLayerState extends State { final List _interactableDrawings = []; + bool _panningStartedWithAToolDragged = false; + /// Timer for debouncing repository updates Timer? _debounceTimer; @@ -95,12 +97,13 @@ class _InteractiveLayerState extends State { // register the callback context.read() - ..registerCallback(onPanUpdate) ..registerCallback(onLongPressStart) ..registerCallback(onTap) ..registerCallback(onLongPressMoveUpdate); } + void onTap(TapUpDetails details) => _ifDrawingSelected(details.localPosition); + void _setDrawingsFromConfigs() { _interactableDrawings.clear(); @@ -208,15 +211,17 @@ class _InteractiveLayerState extends State { super.dispose(); } - void onTap(TapUpDetails details) { + InteractableDrawing? _ifDrawingSelected(Offset position) { bool anyDrawingHit = false; + InteractableDrawing? selectedDrawing; for (final drawing in _interactableDrawings) { if (drawing.hitTest( - details.localPosition, + position, widget.epochToCanvasX, widget.quoteToCanvasY, )) { anyDrawingHit = true; + selectedDrawing = drawing; break; } } @@ -227,6 +232,7 @@ class _InteractiveLayerState extends State { _selectedDrawing = null; }); } + return selectedDrawing; } void onLongPressStart(LongPressStartDetails details) { @@ -243,58 +249,79 @@ class _InteractiveLayerState extends State { @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); - return Stack( - fit: StackFit.expand, - children: [ - ..._interactableDrawings - .map((e) => CustomPaint( - foregroundPainter: _DrawingPainter( - drawing: e, - series: widget.series, - config: e.config, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToCanvasY, - quoteFromY: widget.quoteFromCanvasY, - isDrawingToolSelected: widget.selectedDrawingTool != null, - isSelected: _isDrawingSelected, - leftEpoch: xAxis.leftBoundEpoch, - rightEpoch: xAxis.rightBoundEpoch, - onDrawingToolClicked: () { - _selectedDrawing = e; - }, - updatePositionCallback: ( - EdgePoint edgePoint, - DraggableEdgePoint draggableEdgePoint, - ) { - return draggableEdgePoint.updatePosition( - edgePoint.epoch, - edgePoint.quote, - xAxis.xFromEpoch, - widget.quoteToCanvasY, - ); - }, - setIsOverStartPoint: ({ - required bool isOverPoint, - }) { - // isOverStartPoint = isOverPoint; - }, - setIsOverMiddlePoint: ({ - required bool isOverPoint, - }) { - // isOverMiddlePoint = isOverPoint; - }, - setIsOverEndPoint: ({ - required bool isOverPoint, - }) { - // isOverEndPoint = isOverPoint; - }, - ), - )) - .toList(), - ], + return GestureDetector( + onTapUp: (details) { + _ifDrawingSelected(details.localPosition); + }, + onPanStart: (details) { + final selectedTool = _ifDrawingSelected(details.localPosition); + if (selectedTool != null) { + _panningStartedWithAToolDragged = true; + } + + _selectedDrawing = selectedTool; + }, + onPanUpdate: (details) { + if (_panningStartedWithAToolDragged) { + onPanUpdate(details); + } + }, + onPanEnd: (details) { + _panningStartedWithAToolDragged = false; + }, + child: Stack( + fit: StackFit.expand, + children: [ + ..._interactableDrawings + .map((e) => CustomPaint( + foregroundPainter: _DrawingPainter( + drawing: e, + series: widget.series, + config: e.config, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToCanvasY, + quoteFromY: widget.quoteFromCanvasY, + isDrawingToolSelected: widget.selectedDrawingTool != null, + isSelected: _isDrawingSelected, + leftEpoch: xAxis.leftBoundEpoch, + rightEpoch: xAxis.rightBoundEpoch, + onDrawingToolClicked: () { + _selectedDrawing = e; + }, + updatePositionCallback: ( + EdgePoint edgePoint, + DraggableEdgePoint draggableEdgePoint, + ) { + return draggableEdgePoint.updatePosition( + edgePoint.epoch, + edgePoint.quote, + xAxis.xFromEpoch, + widget.quoteToCanvasY, + ); + }, + setIsOverStartPoint: ({ + required bool isOverPoint, + }) { + // isOverStartPoint = isOverPoint; + }, + setIsOverMiddlePoint: ({ + required bool isOverPoint, + }) { + // isOverMiddlePoint = isOverPoint; + }, + setIsOverEndPoint: ({ + required bool isOverPoint, + }) { + // isOverEndPoint = isOverPoint; + }, + ), + )) + .toList(), + ], + ), ); } } From 52fd5f8d2eba8dbde98e45283a43c19d46501472 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 18:03:12 +0800 Subject: [PATCH 023/311] code cleanup :recycle: --- .../drawing_tools_ui/drawing_tool_config.dart | 9 ++++++-- .../drawing_tool_chart/interactive_layer.dart | 21 ++----------------- 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index d7ba1dea2..135628645 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -115,6 +115,11 @@ abstract class InteractableDrawing { /// Initializes [InteractableDrawing]. InteractableDrawing({required this.config}); + static const double _hitTestMargin = 16; + + /// The margin for hit testing. + double get hitTestMargin => _hitTestMargin; + /// The drawing tool config. final DrawingToolConfig config; @@ -178,7 +183,7 @@ class LineInteractableDrawing extends InteractableDrawing { // If line length is too small, treat it as a point if (lineLength < 1) { - return (offset - startOffset).distance <= 8; + return (offset - startOffset).distance <= hitTestMargin; } // Calculate perpendicular distance from point to line @@ -198,7 +203,7 @@ class LineInteractableDrawing extends InteractableDrawing { final bool isWithinRange = dotProduct >= 0 && dotProduct <= lineLength * lineLength; - final result = isWithinRange && distance <= 8; + final result = isWithinRange && distance <= hitTestMargin; // Return true if within range and close enough to line (8 pixel margin) return result; } diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index b76da13b9..1b740b8ec 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -96,10 +96,7 @@ class _InteractiveLayerState extends State { widget.drawingToolsRepo.addListener(_setDrawingsFromConfigs); // register the callback - context.read() - ..registerCallback(onLongPressStart) - ..registerCallback(onTap) - ..registerCallback(onLongPressMoveUpdate); + context.read().registerCallback(onTap); } void onTap(TapUpDetails details) => _ifDrawingSelected(details.localPosition); @@ -129,13 +126,7 @@ class _InteractiveLayerState extends State { widget.quoteToCanvasY, ); - setState(() { - if (_interactableDrawings.isNotEmpty) { - final fromDrawings = - _interactableDrawings.first as LineInteractableDrawing; - final selectedOne = _selectedDrawing as LineInteractableDrawing; - } - }); + setState(() {}); // Check if points have changed and update the config in the repository final updatedPoints = _getDrawingPoints(_selectedDrawing!); @@ -235,14 +226,6 @@ class _InteractiveLayerState extends State { return selectedDrawing; } - void onLongPressStart(LongPressStartDetails details) { - // handle long press start - } - - void onLongPressMoveUpdate(LongPressMoveUpdateDetails details) { - // handle long press move update - } - bool _isDrawingSelected(InteractableDrawing drawing) => drawing.config.configId == _selectedDrawing?.config.configId; From 3d190a78810fad542cc1773d8f48cea0f256110e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 18:31:37 +0800 Subject: [PATCH 024/311] remove some redundant code --- .../drawing_tools_ui/drawing_tool_config.dart | 1 + .../drawing_tool_chart/interactive_layer.dart | 57 +++---------------- 2 files changed, 10 insertions(+), 48 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 135628645..0c9db66ee 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -228,6 +228,7 @@ class LineInteractableDrawing extends InteractableDrawing { // Check if this drawing is selected final bool isCurrentlySelected = isDrawingSelected(this); + print('isCurrentlySelected: $isCurrentlySelected'); // Use glowy paint style if selected, otherwise use normal paint style final Paint paint = isCurrentlySelected diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 1b740b8ec..1490a8792 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -2,9 +2,7 @@ import 'dart:async'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.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/data_model/point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; @@ -213,16 +211,18 @@ class _InteractiveLayerState extends State { )) { anyDrawingHit = true; selectedDrawing = drawing; + _selectedDrawing = selectedDrawing; break; } } // If no drawing was hit, clear the selection if (!anyDrawingHit) { - setState(() { - _selectedDrawing = null; - }); + _selectedDrawing = null; } + + setState(() {}); + return selectedDrawing; } @@ -271,35 +271,7 @@ class _InteractiveLayerState extends State { isSelected: _isDrawingSelected, leftEpoch: xAxis.leftBoundEpoch, rightEpoch: xAxis.rightBoundEpoch, - onDrawingToolClicked: () { - _selectedDrawing = e; - }, - updatePositionCallback: ( - EdgePoint edgePoint, - DraggableEdgePoint draggableEdgePoint, - ) { - return draggableEdgePoint.updatePosition( - edgePoint.epoch, - edgePoint.quote, - xAxis.xFromEpoch, - widget.quoteToCanvasY, - ); - }, - setIsOverStartPoint: ({ - required bool isOverPoint, - }) { - // isOverStartPoint = isOverPoint; - }, - setIsOverMiddlePoint: ({ - required bool isOverPoint, - }) { - // isOverMiddlePoint = isOverPoint; - }, - setIsOverEndPoint: ({ - required bool isOverPoint, - }) { - // isOverEndPoint = isOverPoint; - }, + // onDrawingToolClicked: () => _selectedDrawing = e, ), )) .toList(), @@ -323,15 +295,11 @@ class _DrawingPainter extends CustomPainter { required this.epochToX, required this.quoteToY, required this.quoteFromY, - required this.setIsOverStartPoint, - required this.updatePositionCallback, required this.leftEpoch, required this.rightEpoch, - required this.onDrawingToolClicked, + // required this.onDrawingToolClicked, required this.isSelected, this.isDrawingToolSelected = false, - this.setIsOverMiddlePoint, - this.setIsOverEndPoint, }); final InteractableDrawing drawing; @@ -343,13 +311,6 @@ class _DrawingPainter extends CustomPainter { final int Function(double x) epochFromX; final double Function(int x) epochToX; final double Function(double y) quoteToY; - final void Function({required bool isOverPoint}) setIsOverStartPoint; - final void Function({required bool isOverPoint})? setIsOverMiddlePoint; - final void Function({required bool isOverPoint})? setIsOverEndPoint; - final Point Function( - EdgePoint edgePoint, - DraggableEdgePoint draggableEdgePoint, - ) updatePositionCallback; /// Current left epoch of the chart. final int leftEpoch; @@ -359,7 +320,7 @@ class _DrawingPainter extends CustomPainter { double Function(double) quoteFromY; - final Function() onDrawingToolClicked; + // final Function() onDrawingToolClicked; /// Returns `true` if the drawing tool is selected. final bool Function(InteractableDrawing) isSelected; @@ -390,7 +351,7 @@ class _DrawingPainter extends CustomPainter { @override bool hitTest(Offset position) { if (drawing.hitTest(position, epochToX, quoteToY)) { - onDrawingToolClicked(); + // onDrawingToolClicked(); return true; } return false; From a84561e36a1b787a84775af33d74b7ef785693cc Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 28 Feb 2025 18:38:53 +0800 Subject: [PATCH 025/311] remove some redundant code --- lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 1490a8792..6a06fe36d 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -252,6 +252,8 @@ class _InteractiveLayerState extends State { onPanEnd: (details) { _panningStartedWithAToolDragged = false; }, + // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement + // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. child: Stack( fit: StackFit.expand, children: [ From 8151fdc8ef760c2f10127aed9fb05f44b3b9cf98 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 08:53:56 +0800 Subject: [PATCH 026/311] code cleanup :recycle: --- .../drawing_tool_chart/interactive_layer.dart | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart index 6a06fe36d..401ffd5b2 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart @@ -262,17 +262,13 @@ class _InteractiveLayerState extends State { foregroundPainter: _DrawingPainter( drawing: e, series: widget.series, - config: e.config, theme: context.watch(), chartConfig: widget.chartConfig, epochFromX: xAxis.epochFromX, epochToX: xAxis.xFromEpoch, quoteToY: widget.quoteToCanvasY, quoteFromY: widget.quoteFromCanvasY, - isDrawingToolSelected: widget.selectedDrawingTool != null, isSelected: _isDrawingSelected, - leftEpoch: xAxis.leftBoundEpoch, - rightEpoch: xAxis.rightBoundEpoch, // onDrawingToolClicked: () => _selectedDrawing = e, ), )) @@ -290,36 +286,23 @@ class _DrawingPainter extends CustomPainter { _DrawingPainter({ required this.drawing, required this.series, - required this.config, required this.theme, required this.chartConfig, required this.epochFromX, required this.epochToX, required this.quoteToY, required this.quoteFromY, - required this.leftEpoch, - required this.rightEpoch, - // required this.onDrawingToolClicked, required this.isSelected, - this.isDrawingToolSelected = false, }); final InteractableDrawing drawing; final DataSeries series; - final DrawingToolConfig config; final ChartTheme theme; final ChartConfig chartConfig; - final bool isDrawingToolSelected; final int Function(double x) epochFromX; final double Function(int x) epochToX; final double Function(double y) quoteToY; - /// Current left epoch of the chart. - final int leftEpoch; - - /// Current right epoch of the chart. - final int rightEpoch; - double Function(double) quoteFromY; // final Function() onDrawingToolClicked; From de887ec6c425a14639f0df0eced8a2f6c1211ab2 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 10:09:24 +0800 Subject: [PATCH 027/311] move interactive layer to a separate folder --- lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart | 2 +- lib/src/deriv_chart/chart/main_chart.dart | 2 +- .../interactive_layer.dart | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) rename lib/src/deriv_chart/{drawing_tool_chart => interactive_layer}/interactive_layer.dart (99%) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 0c9db66ee..30639a677 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -6,7 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_model/point.dart'; -import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/interactive_layer.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:flutter/material.dart'; /// Drawing tools config diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 3eee46970..87ff66c91 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -1,7 +1,7 @@ import 'package:collection/collection.dart' show IterableExtension; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; -import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/interactive_layer.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; import 'package:deriv_chart/src/models/tick.dart'; diff --git a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart similarity index 99% rename from lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart rename to lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 401ffd5b2..4a092da90 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -15,7 +15,7 @@ import '../chart/data_visualization/chart_data.dart'; import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../chart/y_axis/y_axis_config.dart'; -import 'drawing_tools.dart'; +import '../drawing_tool_chart/drawing_tools.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. From b174c91c70439ec1f6145b3e687e3210dcfb7be2 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 10:15:14 +0800 Subject: [PATCH 028/311] Move InteractableDrawing custom painter to a separate file --- .../drawing_tools_ui/drawing_tool_config.dart | 3 +- .../interactable_drawing_custom_painter.dart | 76 +++++++++++++++++++ .../interactive_layer/interactive_layer.dart | 69 +---------------- 3 files changed, 79 insertions(+), 69 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 30639a677..190385cd3 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -6,7 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_model/point.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:flutter/material.dart'; /// Drawing tools config @@ -228,7 +228,6 @@ class LineInteractableDrawing extends InteractableDrawing { // Check if this drawing is selected final bool isCurrentlySelected = isDrawingSelected(this); - print('isCurrentlySelected: $isCurrentlySelected'); // Use glowy paint style if selected, otherwise use normal paint style final Paint paint = isCurrentlySelected diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart new file mode 100644 index 000000000..2eed6c934 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -0,0 +1,76 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; +import 'package:flutter/rendering.dart'; + +import '../chart/data_visualization/chart_series/data_series.dart'; +import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; +import '../chart/data_visualization/models/animation_info.dart'; +import '../chart/y_axis/y_axis_config.dart'; + +/// A callback which calling it should return if the [drawing] is selected. +typedef IsDrawingSelected = bool Function(InteractableDrawing drawing); + +/// Interactable drawing custom painter. +class InteractableDrawingCustomPainter extends CustomPainter { + /// Initializes the interactable drawing custom painter. + InteractableDrawingCustomPainter({ + required this.drawing, + required this.series, + required this.theme, + required this.chartConfig, + required this.epochFromX, + required this.epochToX, + required this.quoteToY, + required this.quoteFromY, + required this.isSelected, + }); + + final InteractableDrawing drawing; + final DataSeries series; + final ChartTheme theme; + final ChartConfig chartConfig; + final int Function(double x) epochFromX; + final double Function(int x) epochToX; + final double Function(double y) quoteToY; + + double Function(double) quoteFromY; + + // final Function() onDrawingToolClicked; + + /// Returns `true` if the drawing tool is selected. + final bool Function(InteractableDrawing) isSelected; + + @override + void paint(Canvas canvas, Size size) { + YAxisConfig.instance.yAxisClipping(canvas, size, () { + drawing.paint( + canvas, + size, + epochToX, + quoteToY, + const AnimationInfo(), + isSelected, + ); + // TODO(NA): Paint the [drawing] + }); + } + + @override + bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) => + // TODO(NA): Return true/false based on the [drawing] state + true; + + @override + bool shouldRebuildSemantics(InteractableDrawingCustomPainter oldDelegate) => + false; + + @override + bool hitTest(Offset position) { + if (drawing.hitTest(position, epochToX, quoteToY)) { + // onDrawingToolClicked(); + return true; + } + return false; + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 4a092da90..5607fda0b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -3,7 +3,6 @@ import 'dart:async'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.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/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -14,8 +13,8 @@ import 'package:provider/provider.dart'; import '../chart/data_visualization/chart_data.dart'; import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; -import '../chart/y_axis/y_axis_config.dart'; import '../drawing_tool_chart/drawing_tools.dart'; +import 'interactable_drawing_custom_painter.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. @@ -259,7 +258,7 @@ class _InteractiveLayerState extends State { children: [ ..._interactableDrawings .map((e) => CustomPaint( - foregroundPainter: _DrawingPainter( + foregroundPainter: InteractableDrawingCustomPainter( drawing: e, series: widget.series, theme: context.watch(), @@ -278,67 +277,3 @@ class _InteractiveLayerState extends State { ); } } - -/// A callback which calling it should return if the [drawing] is selected. -typedef IsDrawingSelected = bool Function(InteractableDrawing drawing); - -class _DrawingPainter extends CustomPainter { - _DrawingPainter({ - required this.drawing, - required this.series, - required this.theme, - required this.chartConfig, - required this.epochFromX, - required this.epochToX, - required this.quoteToY, - required this.quoteFromY, - required this.isSelected, - }); - - final InteractableDrawing drawing; - final DataSeries series; - final ChartTheme theme; - final ChartConfig chartConfig; - final int Function(double x) epochFromX; - final double Function(int x) epochToX; - final double Function(double y) quoteToY; - - double Function(double) quoteFromY; - - // final Function() onDrawingToolClicked; - - /// Returns `true` if the drawing tool is selected. - final bool Function(InteractableDrawing) isSelected; - - @override - void paint(Canvas canvas, Size size) { - YAxisConfig.instance.yAxisClipping(canvas, size, () { - drawing.paint( - canvas, - size, - epochToX, - quoteToY, - const AnimationInfo(), - isSelected, - ); - // TODO(NA): Paint the [drawing] - }); - } - - @override - bool shouldRepaint(_DrawingPainter oldDelegate) => - // TODO(NA): Return true/false based on the [drawing] state - true; - - @override - bool shouldRebuildSemantics(_DrawingPainter oldDelegate) => false; - - @override - bool hitTest(Offset position) { - if (drawing.hitTest(position, epochToX, quoteToY)) { - // onDrawingToolClicked(); - return true; - } - return false; - } -} From 8da3dad71e617e19dd660c4ddb677c1922a25a05 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 10:50:14 +0800 Subject: [PATCH 029/311] code cleanup :recycle: --- .../drawing_tools_ui/drawing_tool_config.dart | 203 +--------------- .../line/line_drawing_tool_config.dart | 1 + .../interactable_drawing.dart | 229 ++++++++++++++++++ .../interactable_drawing_custom_painter.dart | 1 + .../interactive_layer/interactive_layer.dart | 1 + 5 files changed, 233 insertions(+), 202 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawing.dart diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index 190385cd3..babcaf4da 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -2,11 +2,10 @@ import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_tool_label_painter.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/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/data_model/point.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing.dart'; import 'package:flutter/material.dart'; /// Drawing tools config @@ -102,203 +101,3 @@ abstract class DrawingToolConfig extends AddOnConfig { }) => null; } - -/// The class that will be generated by the drawing tool config instance when -/// they are created or the saved ones that are loaded from storage. -/// The information from this class (its subclasses) will be used to draw the -/// tool on the chart. -/// It will keep the latest state of the drawing tool as the user interacts -/// with the tools in the runtime. -/// During the time that user interacts with a tool. by some debounce mechanism -/// This class will update the config which is supposed to be saved in the storage. -abstract class InteractableDrawing { - /// Initializes [InteractableDrawing]. - InteractableDrawing({required this.config}); - - static const double _hitTestMargin = 16; - - /// The margin for hit testing. - double get hitTestMargin => _hitTestMargin; - - /// The drawing tool config. - final DrawingToolConfig config; - - /// Returns `true` if the drawing tool is hit by the given offset. - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); - - /// Called when the drawing tool is dragged and updates the drawing position - /// properties based on the dragging [details]. - /// - /// Each drawing will know how to handle and update itself accordingly based - /// on where the dragging position is like if it's dragging a point or a line - /// of the tool. - void onDragUpdate( - DragUpdateDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ); - - /// Paints the drawing tool on the chart. - void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - IsDrawingSelected isDrawingSelected, - ); -} - -/// Interactable drawing for line drawing tool. -class LineInteractableDrawing extends InteractableDrawing { - /// Initializes [LineInteractableDrawing]. - LineInteractableDrawing({ - required LineDrawingToolConfig config, - required this.startPoint, - required this.endPoint, - }) : super(config: config); - - /// Start point of the line. - EdgePoint startPoint; - - /// End point of the line. - EdgePoint endPoint; - - @override - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { - // Convert start and end points from epoch/quote to screen coordinates - final Offset startOffset = Offset( - epochToX(startPoint.epoch), - quoteToY(startPoint.quote), - ); - final Offset endOffset = Offset( - epochToX(endPoint.epoch), - quoteToY(endPoint.quote), - ); - - // Calculate line length - final double lineLength = (endOffset - startOffset).distance; - - // If line length is too small, treat it as a point - if (lineLength < 1) { - return (offset - startOffset).distance <= hitTestMargin; - } - - // Calculate perpendicular distance from point to line - // Formula: |((y2-y1)x - (x2-x1)y + x2y1 - y2x1)| / sqrt((y2-y1)² + (x2-x1)²) - final double distance = ((endOffset.dy - startOffset.dy) * offset.dx - - (endOffset.dx - startOffset.dx) * offset.dy + - endOffset.dx * startOffset.dy - - endOffset.dy * startOffset.dx) - .abs() / - lineLength; - - // Check if point is within the line segment (not just the infinite line) - final double dotProduct = - (offset.dx - startOffset.dx) * (endOffset.dx - startOffset.dx) + - (offset.dy - startOffset.dy) * (endOffset.dy - startOffset.dy); - - final bool isWithinRange = - dotProduct >= 0 && dotProduct <= lineLength * lineLength; - - final result = isWithinRange && distance <= hitTestMargin; - // Return true if within range and close enough to line (8 pixel margin) - return result; - } - - @override - void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - IsDrawingSelected isDrawingSelected, - ) { - final config = this.config as LineDrawingToolConfig; - final LineStyle lineStyle = config.lineStyle; - final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - - final Offset startOffset = - Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); - final Offset endOffset = - Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); - - // Check if this drawing is selected - final bool isCurrentlySelected = isDrawingSelected(this); - - // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = isCurrentlySelected - ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) - : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); - - canvas.drawLine(startOffset, endOffset, paint); - - // Draw endpoints with glowy effect if selected - if (isCurrentlySelected) { - const double markerRadius = 5; - canvas - ..drawCircle( - startOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ) - ..drawCircle( - endOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); - } - } - - @override - void onDragUpdate( - DragUpdateDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { - // Get the drag delta in screen coordinates - final Offset delta = details.delta; - - // Convert start and end points to screen coordinates - final Offset startOffset = Offset( - epochToX(startPoint.epoch), - quoteToY(startPoint.quote), - ); - final Offset endOffset = Offset( - epochToX(endPoint.epoch), - quoteToY(endPoint.quote), - ); - - // Apply the delta to get new screen coordinates - final Offset newStartOffset = startOffset + delta; - final Offset newEndOffset = endOffset + delta; - - // Convert back to epoch and quote coordinates - final int newStartEpoch = epochFromX(newStartOffset.dx); - final double newStartQuote = quoteFromY(newStartOffset.dy); - final int newEndEpoch = epochFromX(newEndOffset.dx); - final double newEndQuote = quoteFromY(newEndOffset.dy); - - // Update the start and end points - startPoint = EdgePoint( - epoch: newStartEpoch, - quote: newStartQuote, - ); - endPoint = EdgePoint( - epoch: newEndEpoch, - quote: newEndQuote, - ); - - // Note: The actual config update should be handled by the InteractiveLayer - // which has access to the Repository. This method only updates the local - // startPoint and endPoint properties, which will be reflected in the drawing. - // - // The InteractiveLayer should periodically check if the selected drawing's - // points have changed and update the config in the repository accordingly. - } -} diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index f84ea7e68..effb72d5d 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_ 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/data_model/point.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart new file mode 100644 index 000000000..aed8f8549 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -0,0 +1,229 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; +import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/animation.dart'; +import 'package:flutter/widgets.dart'; + +import '../chart/data_visualization/chart_data.dart'; +import '../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; +import '../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; +import '../chart/data_visualization/models/animation_info.dart'; +import 'interactable_drawing_custom_painter.dart'; + +/// The class that will be generated by the drawing tool config instance when +/// they are created or the saved ones that are loaded from storage. +/// The information from this class (its subclasses) will be used to draw the +/// tool on the chart. +/// It will keep the latest state of the drawing tool as the user interacts +/// with the tools in the runtime. +/// During the time that user interacts with a tool. by some debounce mechanism +/// This class will update the config which is supposed to be saved in the storage. +abstract class InteractableDrawing { + /// Initializes [InteractableDrawing]. + InteractableDrawing({required this.config}); + + static const double _hitTestMargin = 16; + + /// The margin for hit testing. + double get hitTestMargin => _hitTestMargin; + + /// The drawing tool config. + final DrawingToolConfig config; + + /// Returns `true` if the drawing tool is hit by the given offset. + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); + + /// Called when the drawing tool dragging is started. + void onDragStart( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + /// Called when the drawing tool is dragged and updates the drawing position + /// properties based on the dragging [details]. + /// + /// Each drawing will know how to handle and update itself accordingly based + /// on where the dragging position is like if it's dragging a point or a line + /// of the tool. + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ); + + /// Called when the drawing tool dragging is ended. + void onDragEnd( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + /// Paints the drawing tool on the chart. + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + IsDrawingSelected isDrawingSelected, + ); +} + +/// Interactable drawing for line drawing tool. +class LineInteractableDrawing extends InteractableDrawing { + /// Initializes [LineInteractableDrawing]. + LineInteractableDrawing({ + required LineDrawingToolConfig config, + required this.startPoint, + required this.endPoint, + }) : super(config: config); + + /// Start point of the line. + EdgePoint startPoint; + + /// End point of the line. + EdgePoint endPoint; + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + // Convert start and end points from epoch/quote to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint.epoch), + quoteToY(startPoint.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint.epoch), + quoteToY(endPoint.quote), + ); + + // Calculate line length + final double lineLength = (endOffset - startOffset).distance; + + // If line length is too small, treat it as a point + if (lineLength < 1) { + return (offset - startOffset).distance <= hitTestMargin; + } + + // Calculate perpendicular distance from point to line + // Formula: |((y2-y1)x - (x2-x1)y + x2y1 - y2x1)| / sqrt((y2-y1)² + (x2-x1)²) + final double distance = ((endOffset.dy - startOffset.dy) * offset.dx - + (endOffset.dx - startOffset.dx) * offset.dy + + endOffset.dx * startOffset.dy - + endOffset.dy * startOffset.dx) + .abs() / + lineLength; + + // Check if point is within the line segment (not just the infinite line) + final double dotProduct = + (offset.dx - startOffset.dx) * (endOffset.dx - startOffset.dx) + + (offset.dy - startOffset.dy) * (endOffset.dy - startOffset.dy); + + final bool isWithinRange = + dotProduct >= 0 && dotProduct <= lineLength * lineLength; + + final result = isWithinRange && distance <= hitTestMargin; + // Return true if within range and close enough to line (8 pixel margin) + return result; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + IsDrawingSelected isDrawingSelected, + ) { + final config = this.config as LineDrawingToolConfig; + final LineStyle lineStyle = config.lineStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + + final Offset startOffset = + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); + final Offset endOffset = + Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); + + // Check if this drawing is selected + final bool isCurrentlySelected = isDrawingSelected(this); + + // Use glowy paint style if selected, otherwise use normal paint style + final Paint paint = isCurrentlySelected + ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) + : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); + + canvas.drawLine(startOffset, endOffset, paint); + + // Draw endpoints with glowy effect if selected + if (isCurrentlySelected) { + const double markerRadius = 5; + canvas + ..drawCircle( + startOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ) + ..drawCircle( + endOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); + } + } + + @override + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + // Get the drag delta in screen coordinates + final Offset delta = details.delta; + + // Convert start and end points to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint.epoch), + quoteToY(startPoint.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint.epoch), + quoteToY(endPoint.quote), + ); + + // Apply the delta to get new screen coordinates + final Offset newStartOffset = startOffset + delta; + final Offset newEndOffset = endOffset + delta; + + // Convert back to epoch and quote coordinates + final int newStartEpoch = epochFromX(newStartOffset.dx); + final double newStartQuote = quoteFromY(newStartOffset.dy); + final int newEndEpoch = epochFromX(newEndOffset.dx); + final double newEndQuote = quoteFromY(newEndOffset.dy); + + // Update the start and end points + startPoint = EdgePoint( + epoch: newStartEpoch, + quote: newStartQuote, + ); + endPoint = EdgePoint( + epoch: newEndEpoch, + quote: newEndQuote, + ); + + // Note: The actual config update should be handled by the InteractiveLayer + // which has access to the Repository. This method only updates the local + // startPoint and endPoint properties, which will be reflected in the drawing. + // + // The InteractiveLayer should periodically check if the selected drawing's + // points have changed and update the config in the repository accordingly. + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 2eed6c934..6e417a828 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/rendering.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 5607fda0b..ee7f8c758 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -14,6 +14,7 @@ import '../chart/data_visualization/chart_data.dart'; import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../drawing_tool_chart/drawing_tools.dart'; +import 'interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; /// Interactive layer of the chart package where elements can be drawn and can From 1d3cd986cec30d96d41096e08a5d003ab94adfcb Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 11:13:29 +0800 Subject: [PATCH 030/311] add onDragStart and end life-cycle method --- .../interactive_layer/interactable_drawing.dart | 12 ++++++++---- .../interactive_layer/interactive_layer.dart | 14 ++++++++++++++ 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index aed8f8549..05dcb7f50 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -35,12 +35,14 @@ abstract class InteractableDrawing { /// Called when the drawing tool dragging is started. void onDragStart( - DragUpdateDetails details, + DragStartDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - ) {} + ) { + print('onDragStart $runtimeType}'); + } /// Called when the drawing tool is dragged and updates the drawing position /// properties based on the dragging [details]. @@ -58,12 +60,14 @@ abstract class InteractableDrawing { /// Called when the drawing tool dragging is ended. void onDragEnd( - DragUpdateDetails details, + DragEndDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - ) {} + ) { + print('onDragEnd $runtimeType'); + } /// Paints the drawing tool on the chart. void paint( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index ee7f8c758..b20f41ea1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -243,6 +243,13 @@ class _InteractiveLayerState extends State { } _selectedDrawing = selectedTool; + _selectedDrawing?.onDragStart( + details, + widget.epochFromCanvasX, + widget.quoteFromCanvasY, + widget.epochToCanvasX, + widget.quoteToCanvasY, + ); }, onPanUpdate: (details) { if (_panningStartedWithAToolDragged) { @@ -250,6 +257,13 @@ class _InteractiveLayerState extends State { } }, onPanEnd: (details) { + _selectedDrawing?.onDragEnd( + details, + widget.epochFromCanvasX, + widget.quoteFromCanvasY, + widget.epochToCanvasX, + widget.quoteToCanvasY, + ); _panningStartedWithAToolDragged = false; }, // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement From 31b679cbcd65fc25bbc2e29c1731348b39a54de1 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 13:34:02 +0800 Subject: [PATCH 031/311] improve updating the config structure --- .../interactable_drawing.dart | 16 ++++--- .../interactive_layer/interactive_layer.dart | 42 +------------------ 2 files changed, 13 insertions(+), 45 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index 05dcb7f50..754857b73 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -1,7 +1,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; -import 'package:flutter/animation.dart'; import 'package:flutter/widgets.dart'; import '../chart/data_visualization/chart_data.dart'; @@ -18,7 +17,7 @@ import 'interactable_drawing_custom_painter.dart'; /// with the tools in the runtime. /// During the time that user interacts with a tool. by some debounce mechanism /// This class will update the config which is supposed to be saved in the storage. -abstract class InteractableDrawing { +abstract class InteractableDrawing { /// Initializes [InteractableDrawing]. InteractableDrawing({required this.config}); @@ -28,7 +27,10 @@ abstract class InteractableDrawing { double get hitTestMargin => _hitTestMargin; /// The drawing tool config. - final DrawingToolConfig config; + final T config; + + /// Returns the updated config. + T getUpdatedConfig(); /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); @@ -81,7 +83,8 @@ abstract class InteractableDrawing { } /// Interactable drawing for line drawing tool. -class LineInteractableDrawing extends InteractableDrawing { +class LineInteractableDrawing + extends InteractableDrawing { /// Initializes [LineInteractableDrawing]. LineInteractableDrawing({ required LineDrawingToolConfig config, @@ -146,7 +149,6 @@ class LineInteractableDrawing extends InteractableDrawing { AnimationInfo animationInfo, IsDrawingSelected isDrawingSelected, ) { - final config = this.config as LineDrawingToolConfig; final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); @@ -230,4 +232,8 @@ class LineInteractableDrawing extends InteractableDrawing { // The InteractiveLayer should periodically check if the selected drawing's // points have changed and update the config in the repository accordingly. } + + @override + LineDrawingToolConfig getUpdatedConfig() => + config.copyWith(edgePoints: [startPoint, endPoint]); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index b20f41ea1..c578ebd98 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -2,7 +2,6 @@ import 'dart:async'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.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/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -112,9 +111,6 @@ class _InteractiveLayerState extends State { return; } - // Store the original points before update - final originalPoints = _getDrawingPoints(_selectedDrawing!); - // Update the drawing _selectedDrawing!.onDragUpdate( details, @@ -126,36 +122,7 @@ class _InteractiveLayerState extends State { setState(() {}); - // Check if points have changed and update the config in the repository - final updatedPoints = _getDrawingPoints(_selectedDrawing!); - if (_havePointsChanged(originalPoints, updatedPoints)) { - _updateConfigInRepository(_selectedDrawing!); - } - } - - /// Gets the points from a drawing (specific to each drawing type) - List _getDrawingPoints(InteractableDrawing drawing) { - if (drawing is LineInteractableDrawing) { - return [drawing.startPoint, drawing.endPoint]; - } - // Add cases for other drawing types as needed - return []; - } - - /// Checks if points have changed - bool _havePointsChanged(List original, List updated) { - if (original.length != updated.length) { - return true; - } - - for (int i = 0; i < original.length; i++) { - if (original[i].epoch != updated[i].epoch || - original[i].quote != updated[i].quote) { - return true; - } - } - - return false; + _updateConfigInRepository(_selectedDrawing!); } /// Updates the config in the repository with debouncing @@ -181,13 +148,8 @@ class _InteractiveLayerState extends State { return; // Config not found } - // Create a new config with updated edge points - final updatedConfig = drawing.config.copyWith( - edgePoints: _getDrawingPoints(drawing), - ); - // Update the config in the repository - repo.updateAt(index, updatedConfig); + repo.updateAt(index, drawing.getUpdatedConfig()); }); } From acc93ec6d3f3ec0680d27ca62a95753f7bdaef2f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 14:17:42 +0800 Subject: [PATCH 032/311] add Gesture handler layer --- .../interactive_layer/interactive_layer.dart | 181 ++++++++++++------ 1 file changed, 118 insertions(+), 63 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index c578ebd98..2943d88fa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -74,12 +74,9 @@ class _InteractiveLayerState extends State { /// 5. the decision to make which tool is selected based on the user click and it's coordinate will happen here /// 6. /// - InteractableDrawing? _selectedDrawing; final List _interactableDrawings = []; - bool _panningStartedWithAToolDragged = false; - /// Timer for debouncing repository updates Timer? _debounceTimer; @@ -91,13 +88,8 @@ class _InteractiveLayerState extends State { super.initState(); widget.drawingToolsRepo.addListener(_setDrawingsFromConfigs); - - // register the callback - context.read().registerCallback(onTap); } - void onTap(TapUpDetails details) => _ifDrawingSelected(details.localPosition); - void _setDrawingsFromConfigs() { _interactableDrawings.clear(); @@ -106,27 +98,8 @@ class _InteractiveLayerState extends State { } } - void onPanUpdate(DragUpdateDetails details) { - if (_selectedDrawing == null) { - return; - } - - // Update the drawing - _selectedDrawing!.onDragUpdate( - details, - widget.epochFromCanvasX, - widget.quoteFromCanvasY, - widget.epochToCanvasX, - widget.quoteToCanvasY, - ); - - setState(() {}); - - _updateConfigInRepository(_selectedDrawing!); - } - /// Updates the config in the repository with debouncing - void _updateConfigInRepository(InteractableDrawing drawing) { + void _updateConfigInRepository(InteractableDrawing drawing) { // Cancel any existing timer _debounceTimer?.cancel(); @@ -162,34 +135,66 @@ class _InteractiveLayerState extends State { super.dispose(); } - InteractableDrawing? _ifDrawingSelected(Offset position) { - bool anyDrawingHit = false; - InteractableDrawing? selectedDrawing; - for (final drawing in _interactableDrawings) { - if (drawing.hitTest( - position, - widget.epochToCanvasX, - widget.quoteToCanvasY, - )) { - anyDrawingHit = true; - selectedDrawing = drawing; - _selectedDrawing = selectedDrawing; - break; - } - } + @override + Widget build(BuildContext context) { + return _InteractiveLayerGestureHandler( + drawings: _interactableDrawings, + epochFromX: widget.epochFromCanvasX, + quoteFromY: widget.quoteFromCanvasY, + epochToX: widget.epochToCanvasX, + quoteToY: widget.quoteToCanvasY, + series: widget.series, + chartConfig: widget.chartConfig, + onSaveDrawingChange: _updateConfigInRepository, + ); + } +} - // If no drawing was hit, clear the selection - if (!anyDrawingHit) { - _selectedDrawing = null; - } +class _InteractiveLayerGestureHandler extends StatefulWidget { + const _InteractiveLayerGestureHandler({ + required this.drawings, + required this.epochFromX, + required this.quoteFromY, + required this.epochToX, + required this.quoteToY, + required this.series, + required this.chartConfig, + this.onSaveDrawingChange, + }); - setState(() {}); + final List drawings; - return selectedDrawing; - } + final Function(InteractableDrawing)? onSaveDrawingChange; - bool _isDrawingSelected(InteractableDrawing drawing) => - drawing.config.configId == _selectedDrawing?.config.configId; + /// Main Chart series + final DataSeries series; + + /// Chart configuration + final ChartConfig chartConfig; + + final EpochFromX epochFromX; + final QuoteFromY quoteFromY; + final EpochToX epochToX; + final QuoteToY quoteToY; + + @override + State<_InteractiveLayerGestureHandler> createState() => + _InteractiveLayerGestureHandlerState(); +} + +class _InteractiveLayerGestureHandlerState + extends State<_InteractiveLayerGestureHandler> { + InteractableDrawing? _selectedDrawing; + + bool _panningStartedWithAToolDragged = false; + + @override + void initState() { + super.initState(); + + // register the callback + context.read().registerCallback(onTap); + } @override Widget build(BuildContext context) { @@ -207,10 +212,10 @@ class _InteractiveLayerState extends State { _selectedDrawing = selectedTool; _selectedDrawing?.onDragStart( details, - widget.epochFromCanvasX, - widget.quoteFromCanvasY, - widget.epochToCanvasX, - widget.quoteToCanvasY, + widget.epochFromX, + widget.quoteFromY, + widget.epochToX, + widget.quoteToY, ); }, onPanUpdate: (details) { @@ -221,10 +226,10 @@ class _InteractiveLayerState extends State { onPanEnd: (details) { _selectedDrawing?.onDragEnd( details, - widget.epochFromCanvasX, - widget.quoteFromCanvasY, - widget.epochToCanvasX, - widget.quoteToCanvasY, + widget.epochFromX, + widget.quoteFromY, + widget.epochToX, + widget.quoteToY, ); _panningStartedWithAToolDragged = false; }, @@ -233,7 +238,7 @@ class _InteractiveLayerState extends State { child: Stack( fit: StackFit.expand, children: [ - ..._interactableDrawings + ...widget.drawings .map((e) => CustomPaint( foregroundPainter: InteractableDrawingCustomPainter( drawing: e, @@ -242,8 +247,8 @@ class _InteractiveLayerState extends State { chartConfig: widget.chartConfig, epochFromX: xAxis.epochFromX, epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToCanvasY, - quoteFromY: widget.quoteFromCanvasY, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, isSelected: _isDrawingSelected, // onDrawingToolClicked: () => _selectedDrawing = e, ), @@ -253,4 +258,54 @@ class _InteractiveLayerState extends State { ), ); } + + void onTap(TapUpDetails details) => _ifDrawingSelected(details.localPosition); + + void onPanUpdate(DragUpdateDetails details) { + if (_selectedDrawing == null) { + return; + } + + // Update the drawing + _selectedDrawing!.onDragUpdate( + details, + widget.epochFromX, + widget.quoteFromY, + widget.epochToX, + widget.quoteToY, + ); + + setState(() {}); + + widget.onSaveDrawingChange?.call(_selectedDrawing!); + } + + InteractableDrawing? _ifDrawingSelected(Offset position) { + bool anyDrawingHit = false; + InteractableDrawing? selectedDrawing; + for (final drawing in widget.drawings) { + if (drawing.hitTest( + position, + widget.epochToX, + widget.quoteToY, + )) { + anyDrawingHit = true; + selectedDrawing = drawing; + _selectedDrawing = selectedDrawing; + break; + } + } + + // If no drawing was hit, clear the selection + if (!anyDrawingHit) { + _selectedDrawing = null; + } + + setState(() {}); + + return selectedDrawing; + } + + bool _isDrawingSelected(InteractableDrawing drawing) => + drawing.config.configId == _selectedDrawing?.config.configId; } From b3827832074658f3fb1a207b75811ddff0a6abb7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 3 Mar 2025 14:25:24 +0800 Subject: [PATCH 033/311] add addDrawing callback --- .../deriv_chart/interactive_layer/interactive_layer.dart | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 2943d88fa..6fe37c961 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -96,6 +96,8 @@ class _InteractiveLayerState extends State { for (final config in widget.drawingToolsRepo.items) { _interactableDrawings.add(config.getInteractableDrawing()); } + + setState(() {}); } /// Updates the config in the repository with debouncing @@ -126,6 +128,9 @@ class _InteractiveLayerState extends State { }); } + void _addDrawingToRepo(InteractableDrawing drawing) => + widget.drawingToolsRepo.add(drawing.getUpdatedConfig()); + @override void dispose() { // Cancel the debounce timer when the widget is disposed @@ -146,6 +151,7 @@ class _InteractiveLayerState extends State { series: widget.series, chartConfig: widget.chartConfig, onSaveDrawingChange: _updateConfigInRepository, + onAddDrawing: _addDrawingToRepo, ); } } @@ -160,11 +166,13 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { required this.series, required this.chartConfig, this.onSaveDrawingChange, + this.onAddDrawing, }); final List drawings; final Function(InteractableDrawing)? onSaveDrawingChange; + final Function(InteractableDrawing)? onAddDrawing; /// Main Chart series final DataSeries series; From 71f0a7380c0bec479b34b24867a5acdec564f442 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 16:54:44 +0800 Subject: [PATCH 034/311] delegating gestures to states --- .../interactable_drawing.dart | 21 +- .../interactable_drawing_custom_painter.dart | 10 +- .../interactive_layer/interactive_layer.dart | 332 ++++++++++++++---- 3 files changed, 294 insertions(+), 69 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index 754857b73..4979d2987 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -9,6 +9,14 @@ import '../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../chart/data_visualization/models/animation_info.dart'; import 'interactable_drawing_custom_painter.dart'; +enum DrawingToolState { + normal, + selected, + hovered, + adding, + dragging, +} + /// The class that will be generated by the drawing tool config instance when /// they are created or the saved ones that are loaded from storage. /// The information from this class (its subclasses) will be used to draw the @@ -29,6 +37,9 @@ abstract class InteractableDrawing { /// The drawing tool config. final T config; + @protected + DrawingToolState state = DrawingToolState.normal; + /// Returns the updated config. T getUpdatedConfig(); @@ -78,7 +89,7 @@ abstract class InteractableDrawing { EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - IsDrawingSelected isDrawingSelected, + GetDrawingState getDrawingState, ); } @@ -147,7 +158,7 @@ class LineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - IsDrawingSelected isDrawingSelected, + GetDrawingState getDrawingState, ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); @@ -158,17 +169,17 @@ class LineInteractableDrawing Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); // Check if this drawing is selected - final bool isCurrentlySelected = isDrawingSelected(this); + final DrawingToolState state = getDrawingState(this); // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = isCurrentlySelected + final Paint paint = state == DrawingToolState.selected ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected - if (isCurrentlySelected) { + if (state == DrawingToolState.selected) { const double markerRadius = 5; canvas ..drawCircle( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 6e417a828..6abd88422 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -10,7 +10,9 @@ import '../chart/data_visualization/models/animation_info.dart'; import '../chart/y_axis/y_axis_config.dart'; /// A callback which calling it should return if the [drawing] is selected. -typedef IsDrawingSelected = bool Function(InteractableDrawing drawing); +typedef GetDrawingState = DrawingToolState Function( + InteractableDrawing drawing, +); /// Interactable drawing custom painter. class InteractableDrawingCustomPainter extends CustomPainter { @@ -24,7 +26,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { required this.epochToX, required this.quoteToY, required this.quoteFromY, - required this.isSelected, + required this.getDrawingState, }); final InteractableDrawing drawing; @@ -40,7 +42,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { // final Function() onDrawingToolClicked; /// Returns `true` if the drawing tool is selected. - final bool Function(InteractableDrawing) isSelected; + final DrawingToolState Function(InteractableDrawing) getDrawingState; @override void paint(Canvas canvas, Size size) { @@ -51,7 +53,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { epochToX, quoteToY, const AnimationInfo(), - isSelected, + getDrawingState, ); // TODO(NA): Paint the [drawing] }); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 6fe37c961..8a3640b0c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -1,4 +1,5 @@ import 'dart:async'; +import 'dart:nativewrappers/_internal/vm/lib/ffi_allocation_patch.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; @@ -15,6 +16,7 @@ import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../drawing_tool_chart/drawing_tools.dart'; import 'interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; +// ignore_for_file: public_member_api_docs /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. @@ -29,7 +31,7 @@ class InteractiveLayer extends StatefulWidget { required this.epochToCanvasX, required this.epochFromCanvasX, required this.drawingToolsRepo, - this.selectedDrawingTool, + this.addingDrawingTool, super.key, }); @@ -57,8 +59,11 @@ class InteractiveLayer extends StatefulWidget { /// Converts epoch to canvas X coordinate. final EpochToX epochToCanvasX; - /// Selected drawing tool. - final DrawingToolConfig? selectedDrawingTool; + /// Drawing tool to be added. + /// + /// If it's not null that means we're in the process of adding this drawing + /// tool + final DrawingToolConfig? addingDrawingTool; @override State createState() => _InteractiveLayerState(); @@ -150,6 +155,8 @@ class _InteractiveLayerState extends State { quoteToY: widget.quoteToCanvasY, series: widget.series, chartConfig: widget.chartConfig, + addingDrawingTool: widget.addingDrawingTool, + onClearAddingDrawingTool: widget.drawingTools.clearDrawingToolSelection, onSaveDrawingChange: _updateConfigInRepository, onAddDrawing: _addDrawingToRepo, ); @@ -165,6 +172,8 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { required this.quoteToY, required this.series, required this.chartConfig, + required this.onClearAddingDrawingTool, + this.addingDrawingTool, this.onSaveDrawingChange, this.onAddDrawing, }); @@ -174,6 +183,11 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { final Function(InteractableDrawing)? onSaveDrawingChange; final Function(InteractableDrawing)? onAddDrawing; + final DrawingToolConfig? addingDrawingTool; + + /// To be called whenever adding the [addingDrawingTool] is done to clear it. + final VoidCallback onClearAddingDrawingTool; + /// Main Chart series final DataSeries series; @@ -191,78 +205,110 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { } class _InteractiveLayerGestureHandlerState - extends State<_InteractiveLayerGestureHandler> { + extends State<_InteractiveLayerGestureHandler> + implements InteractiveLayerBase { InteractableDrawing? _selectedDrawing; bool _panningStartedWithAToolDragged = false; + late InteractiveState _interactiveState; + @override void initState() { super.initState(); + _interactiveState = InteractiveNormalState(interactiveLayer: this); + // register the callback context.read().registerCallback(onTap); } + @override + void didUpdateWidget(covariant _InteractiveLayerGestureHandler oldWidget) { + super.didUpdateWidget(oldWidget); + + if (widget.addingDrawingTool != null) { + updateStateTo( + InteractiveAddingToolState( + widget.addingDrawingTool!, + interactiveLayer: this, + ), + ); + } + } + + @override + void updateStateTo(InteractiveState state) => + setState(() => _interactiveState = state); + @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); - return GestureDetector( - onTapUp: (details) { - _ifDrawingSelected(details.localPosition); - }, - onPanStart: (details) { - final selectedTool = _ifDrawingSelected(details.localPosition); - if (selectedTool != null) { - _panningStartedWithAToolDragged = true; - } - - _selectedDrawing = selectedTool; - _selectedDrawing?.onDragStart( - details, - widget.epochFromX, - widget.quoteFromY, - widget.epochToX, - widget.quoteToY, - ); - }, - onPanUpdate: (details) { - if (_panningStartedWithAToolDragged) { - onPanUpdate(details); - } - }, - onPanEnd: (details) { - _selectedDrawing?.onDragEnd( - details, - widget.epochFromX, - widget.quoteFromY, - widget.epochToX, - widget.quoteToY, - ); - _panningStartedWithAToolDragged = false; - }, - // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement - // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. - child: Stack( - fit: StackFit.expand, - children: [ - ...widget.drawings - .map((e) => CustomPaint( - foregroundPainter: InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - isSelected: _isDrawingSelected, - // onDrawingToolClicked: () => _selectedDrawing = e, - ), - )) - .toList(), - ], + print('##### $_interactiveState'); + return Semantics( + child: GestureDetector( + onTapUp: (details) { + _interactiveState.onTap(details); + if (_interactiveState is InteractiveNormalState) { + final selectedDrawing = _ifDrawingSelected(details.localPosition); + if (selectedDrawing != null) { + _updateStateTo(InteractiveSelectedToolState( + selected: selectedDrawing, + onDone: () => _updateStateTo(InteractiveNormalState()), + )); + + _interactiveState.onTap(details); + } + } else { + _interactiveState.onTap( + details, + ); + } + }, + onPanStart: (details) { + final selectedTool = _ifDrawingSelected(details.localPosition); + + if (selectedTool != null && + _interactiveState is InteractiveSelectedToolState) { + _panningStartedWithAToolDragged = true; + _selectedDrawing = selectedTool; + _interactiveState.onPanStart(details); + } + }, + onPanUpdate: (details) { + if (_panningStartedWithAToolDragged) { + onPanUpdate(details); + } + }, + onPanEnd: (details) { + _selectedDrawing?.onDragEnd( + details, + ); + _panningStartedWithAToolDragged = false; + }, + // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement + // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. + child: Stack( + fit: StackFit.expand, + children: [ + ...widget.drawings + .map((e) => CustomPaint( + foregroundPainter: InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: _interactiveState.getToolState, + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), + ], + ), ), ); } @@ -316,4 +362,170 @@ class _InteractiveLayerGestureHandlerState bool _isDrawingSelected(InteractableDrawing drawing) => drawing.config.configId == _selectedDrawing?.config.configId; + + @override + List> get drawings => widget.drawings; + + @override + EpochFromX get epochFromX => widget.epochFromX; + + @override + EpochToX get epochToX => widget.epochToX; + + @override + QuoteFromY get quoteFromY => widget.quoteFromY; + + @override + QuoteToY get quoteToY => widget.quoteToY; +} + +abstract class InteractiveState { + InteractiveState({required this.interactiveLayer}); + + DrawingToolState getToolState(InteractableDrawing drawing); + + final InteractiveLayerBase interactiveLayer; + + EpochFromX get epochFromX => interactiveLayer.epochFromX; + + QuoteFromY get quoteFromY => interactiveLayer.quoteFromY; + + EpochToX get epochToX => interactiveLayer.epochToX; + + QuoteToY get quoteToY => interactiveLayer.quoteToY; + + void onTap( + TapUpDetails details, + ); + + void onPanUpdate( + DragUpdateDetails details, + ); + + void onPanEnd( + DragEndDetails details, + ); + + void onPanStart( + DragStartDetails details, + ); +} + +class InteractiveNormalState extends InteractiveState { + InteractiveNormalState({required super.interactiveLayer}); + + @override + DrawingToolState getToolState( + InteractableDrawing drawing, + ) => + DrawingToolState.normal; + + @override + void onPanEnd(DragEndDetails details) {} + + @override + void onPanStart(DragStartDetails details) {} + + @override + void onPanUpdate(DragUpdateDetails details) {} + + @override + void onTap(TapUpDetails details) { + for (final drawing in interactiveLayer.drawings) { + if (drawing.hitTest( + details.localPosition, + epochToX, + quoteToY, + )) { + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayer: interactiveLayer, + ), + ); + return; + } + } + } +} + +class InteractiveSelectedToolState extends InteractiveState { + InteractiveSelectedToolState({ + required this.selected, + required super.interactiveLayer, + }); + + final InteractableDrawing selected; + + @override + DrawingToolState getToolState( + InteractableDrawing drawing) { + return drawing.config.configId == selected.config.configId + ? DrawingToolState.selected + : DrawingToolState.normal; + } + + @override + void onPanEnd(DragEndDetails details) { + selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); + + interactiveLayer.updateStateTo( + InteractiveNormalState(interactiveLayer: interactiveLayer)); + } + + @override + void onPanStart(DragStartDetails details) { + selected.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onPanUpdate(DragUpdateDetails details) { + selected.onDragUpdate(details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onTap(TapUpDetails details) {} +} + +class InteractiveAddingToolState extends InteractiveState { + InteractiveAddingToolState( + this.addingTool, { + required super.interactiveLayer, + }); + + final DrawingToolConfig addingTool; + + @override + DrawingToolState getToolState( + InteractableDrawing drawing, + ) => + drawing.config.configId == addingTool.configId + ? DrawingToolState.adding + : DrawingToolState.normal; + + @override + void onPanEnd(DragEndDetails details) {} + + @override + void onPanStart(DragStartDetails details) {} + + @override + void onPanUpdate(DragUpdateDetails details) {} + + @override + void onTap(TapUpDetails details) {} +} + +abstract class InteractiveLayerBase { + void updateStateTo(InteractiveState state); + + List> get drawings; + + EpochFromX get epochFromX; + + QuoteFromY get quoteFromY; + + EpochToX get epochToX; + + QuoteToY get quoteToY; } From 901a813d44909780d693db6190245429935a96cf Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 17:07:16 +0800 Subject: [PATCH 035/311] code cleanup --- .../interactive_layer/interactive_layer.dart | 182 ++++++++---------- 1 file changed, 78 insertions(+), 104 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 8a3640b0c..5fa19354c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -1,5 +1,4 @@ import 'dart:async'; -import 'dart:nativewrappers/_internal/vm/lib/ffi_allocation_patch.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; @@ -207,9 +206,7 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { class _InteractiveLayerGestureHandlerState extends State<_InteractiveLayerGestureHandler> implements InteractiveLayerBase { - InteractableDrawing? _selectedDrawing; - - bool _panningStartedWithAToolDragged = false; + // InteractableDrawing? _selectedDrawing; late InteractiveState _interactiveState; @@ -244,48 +241,12 @@ class _InteractiveLayerGestureHandlerState @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); - print('##### $_interactiveState'); return Semantics( child: GestureDetector( - onTapUp: (details) { - _interactiveState.onTap(details); - if (_interactiveState is InteractiveNormalState) { - final selectedDrawing = _ifDrawingSelected(details.localPosition); - if (selectedDrawing != null) { - _updateStateTo(InteractiveSelectedToolState( - selected: selectedDrawing, - onDone: () => _updateStateTo(InteractiveNormalState()), - )); - - _interactiveState.onTap(details); - } - } else { - _interactiveState.onTap( - details, - ); - } - }, - onPanStart: (details) { - final selectedTool = _ifDrawingSelected(details.localPosition); - - if (selectedTool != null && - _interactiveState is InteractiveSelectedToolState) { - _panningStartedWithAToolDragged = true; - _selectedDrawing = selectedTool; - _interactiveState.onPanStart(details); - } - }, - onPanUpdate: (details) { - if (_panningStartedWithAToolDragged) { - onPanUpdate(details); - } - }, - onPanEnd: (details) { - _selectedDrawing?.onDragEnd( - details, - ); - _panningStartedWithAToolDragged = false; - }, + onTapUp: (details) => _interactiveState.onTap(details), + onPanStart: (details) => _interactiveState.onPanStart(details), + onPanUpdate: (details) => _interactiveState.onPanUpdate(details), + onPanEnd: (details) => _interactiveState.onPanEnd(details), // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. child: Stack( @@ -313,55 +274,55 @@ class _InteractiveLayerGestureHandlerState ); } - void onTap(TapUpDetails details) => _ifDrawingSelected(details.localPosition); - - void onPanUpdate(DragUpdateDetails details) { - if (_selectedDrawing == null) { - return; - } - - // Update the drawing - _selectedDrawing!.onDragUpdate( - details, - widget.epochFromX, - widget.quoteFromY, - widget.epochToX, - widget.quoteToY, - ); - - setState(() {}); - - widget.onSaveDrawingChange?.call(_selectedDrawing!); - } - - InteractableDrawing? _ifDrawingSelected(Offset position) { - bool anyDrawingHit = false; - InteractableDrawing? selectedDrawing; - for (final drawing in widget.drawings) { - if (drawing.hitTest( - position, - widget.epochToX, - widget.quoteToY, - )) { - anyDrawingHit = true; - selectedDrawing = drawing; - _selectedDrawing = selectedDrawing; - break; - } - } - - // If no drawing was hit, clear the selection - if (!anyDrawingHit) { - _selectedDrawing = null; - } - - setState(() {}); - - return selectedDrawing; + void onTap(TapUpDetails details) { + _interactiveState.onTap(details); + // _ifDrawingSelected(details.localPosition); } - bool _isDrawingSelected(InteractableDrawing drawing) => - drawing.config.configId == _selectedDrawing?.config.configId; + // void onPanUpdate(DragUpdateDetails details) { + // if (_selectedDrawing == null) { + // return; + // } + // + // // Update the drawing + // _selectedDrawing!.onDragUpdate( + // details, + // widget.epochFromX, + // widget.quoteFromY, + // widget.epochToX, + // widget.quoteToY, + // ); + // + // setState(() {}); + // + // widget.onSaveDrawingChange?.call(_selectedDrawing!); + // } + + // InteractableDrawing? _ifDrawingSelected(Offset position) { + // bool anyDrawingHit = false; + // InteractableDrawing? selectedDrawing; + // for (final drawing in widget.drawings) { + // if (drawing.hitTest( + // position, + // widget.epochToX, + // widget.quoteToY, + // )) { + // anyDrawingHit = true; + // selectedDrawing = drawing; + // _selectedDrawing = selectedDrawing; + // break; + // } + // } + // + // // If no drawing was hit, clear the selection + // if (!anyDrawingHit) { + // _selectedDrawing = null; + // } + // + // setState(() {}); + // + // return selectedDrawing; + // } @override List> get drawings => widget.drawings; @@ -394,21 +355,13 @@ abstract class InteractiveState { QuoteToY get quoteToY => interactiveLayer.quoteToY; - void onTap( - TapUpDetails details, - ); + void onTap(TapUpDetails details); - void onPanUpdate( - DragUpdateDetails details, - ); + void onPanUpdate(DragUpdateDetails details); - void onPanEnd( - DragEndDetails details, - ); + void onPanEnd(DragEndDetails details); - void onPanStart( - DragStartDetails details, - ); + void onPanStart(DragStartDetails details); } class InteractiveNormalState extends InteractiveState { @@ -484,7 +437,28 @@ class InteractiveSelectedToolState extends InteractiveState { } @override - void onTap(TapUpDetails details) {} + void onTap(TapUpDetails details) { + for (final drawing in interactiveLayer.drawings) { + if (drawing.hitTest( + details.localPosition, + epochToX, + quoteToY, + )) { + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayer: interactiveLayer, + ), + ); + + return; + } + } + + interactiveLayer.updateStateTo( + InteractiveNormalState(interactiveLayer: interactiveLayer), + ); + } } class InteractiveAddingToolState extends InteractiveState { From 2a3d007cda68d3c8cb65bae6d03f8a339577eed4 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 17:14:38 +0800 Subject: [PATCH 036/311] code cleanup --- .../interactive_layer/interactive_layer.dart | 46 ------------------- 1 file changed, 46 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 5fa19354c..4621c14ce 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -276,54 +276,8 @@ class _InteractiveLayerGestureHandlerState void onTap(TapUpDetails details) { _interactiveState.onTap(details); - // _ifDrawingSelected(details.localPosition); } - // void onPanUpdate(DragUpdateDetails details) { - // if (_selectedDrawing == null) { - // return; - // } - // - // // Update the drawing - // _selectedDrawing!.onDragUpdate( - // details, - // widget.epochFromX, - // widget.quoteFromY, - // widget.epochToX, - // widget.quoteToY, - // ); - // - // setState(() {}); - // - // widget.onSaveDrawingChange?.call(_selectedDrawing!); - // } - - // InteractableDrawing? _ifDrawingSelected(Offset position) { - // bool anyDrawingHit = false; - // InteractableDrawing? selectedDrawing; - // for (final drawing in widget.drawings) { - // if (drawing.hitTest( - // position, - // widget.epochToX, - // widget.quoteToY, - // )) { - // anyDrawingHit = true; - // selectedDrawing = drawing; - // _selectedDrawing = selectedDrawing; - // break; - // } - // } - // - // // If no drawing was hit, clear the selection - // if (!anyDrawingHit) { - // _selectedDrawing = null; - // } - // - // setState(() {}); - // - // return selectedDrawing; - // } - @override List> get drawings => widget.drawings; From c5e6340a41baf0e1aa5baa7c5ff1e65ceda3e73b Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 17:23:15 +0800 Subject: [PATCH 037/311] fix adding tool being null --- .../deriv_chart/interactive_layer/interactive_layer.dart | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 4621c14ce..d8cf11466 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -30,7 +30,6 @@ class InteractiveLayer extends StatefulWidget { required this.epochToCanvasX, required this.epochFromCanvasX, required this.drawingToolsRepo, - this.addingDrawingTool, super.key, }); @@ -58,12 +57,6 @@ class InteractiveLayer extends StatefulWidget { /// Converts epoch to canvas X coordinate. final EpochToX epochToCanvasX; - /// Drawing tool to be added. - /// - /// If it's not null that means we're in the process of adding this drawing - /// tool - final DrawingToolConfig? addingDrawingTool; - @override State createState() => _InteractiveLayerState(); } @@ -154,7 +147,7 @@ class _InteractiveLayerState extends State { quoteToY: widget.quoteToCanvasY, series: widget.series, chartConfig: widget.chartConfig, - addingDrawingTool: widget.addingDrawingTool, + addingDrawingTool: widget.drawingTools.selectedDrawingTool, onClearAddingDrawingTool: widget.drawingTools.clearDrawingToolSelection, onSaveDrawingChange: _updateConfigInRepository, onAddDrawing: _addDrawingToRepo, From bd523bb1d5e52dc1d1d1ccb9ab99806eef60d567 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 17:24:54 +0800 Subject: [PATCH 038/311] don't unselect when dragging a tool is ended --- lib/src/deriv_chart/interactive_layer/interactive_layer.dart | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index d8cf11466..3553603d7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -368,9 +368,6 @@ class InteractiveSelectedToolState extends InteractiveState { @override void onPanEnd(DragEndDetails details) { selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); - - interactiveLayer.updateStateTo( - InteractiveNormalState(interactiveLayer: interactiveLayer)); } @override From 096f47d9b99b3a0d211a17de732e0f791d32ee33 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 18:08:58 +0800 Subject: [PATCH 039/311] WIP: adding tools flow --- .../line/line_drawing_tool_config.dart | 5 +- .../interactable_drawing.dart | 152 +++++++++++++----- .../interactive_layer/interactive_layer.dart | 17 +- 3 files changed, 130 insertions(+), 44 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index effb72d5d..e0d6017aa 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -104,7 +104,8 @@ class LineDrawingToolConfig extends DrawingToolConfig { @override InteractableDrawing getInteractableDrawing() => LineInteractableDrawing( config: this, - startPoint: edgePoints.first, - endPoint: edgePoints.last, + // TODO(NA): improve the logic. + startPoint: edgePoints.isNotEmpty ? edgePoints.first : null, + endPoint: edgePoints.isNotEmpty ? edgePoints.last : null, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index 4979d2987..220536328 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -46,6 +46,17 @@ abstract class InteractableDrawing { /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); + /// Called when the drawing tool dragging is started. + void onTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + print('onDragStart $runtimeType}'); + } + /// Called when the drawing tool dragging is started. void onDragStart( DragStartDetails details, @@ -104,21 +115,25 @@ class LineInteractableDrawing }) : super(config: config); /// Start point of the line. - EdgePoint startPoint; + EdgePoint? startPoint; /// End point of the line. - EdgePoint endPoint; + EdgePoint? endPoint; @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (startPoint == null || endPoint == null) { + return false; + } + // Convert start and end points from epoch/quote to screen coordinates final Offset startOffset = Offset( - epochToX(startPoint.epoch), - quoteToY(startPoint.quote), + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), ); final Offset endOffset = Offset( - epochToX(endPoint.epoch), - quoteToY(endPoint.quote), + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), ); // Calculate line length @@ -163,35 +178,85 @@ class LineInteractableDrawing final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - final Offset startOffset = - Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); - final Offset endOffset = - Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); - - // Check if this drawing is selected - final DrawingToolState state = getDrawingState(this); - - // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = state == DrawingToolState.selected - ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) - : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); - - canvas.drawLine(startOffset, endOffset, paint); - - // Draw endpoints with glowy effect if selected - if (state == DrawingToolState.selected) { - const double markerRadius = 5; - canvas - ..drawCircle( - startOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ) - ..drawCircle( - endOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); + if (startPoint != null && endPoint != null) { + final Offset startOffset = + Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)); + final Offset endOffset = + Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote)); + + // Check if this drawing is selected + final DrawingToolState state = getDrawingState(this); + + // Use glowy paint style if selected, otherwise use normal paint style + final Paint paint = state == DrawingToolState.selected + ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) + : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); + + canvas.drawLine(startOffset, endOffset, paint); + + // Draw endpoints with glowy effect if selected + if (state == DrawingToolState.selected) { + const double markerRadius = 5; + canvas + ..drawCircle( + startOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ) + ..drawCircle( + endOffset, + markerRadius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); + } + } else { + if (startPoint != null) { + _drawPoint( + startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); + } + + if (endPoint != null) { + _drawPoint( + endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); + } + } + } + + void _drawPoint( + EdgePoint point, + EpochToX epochToX, + QuoteToY quoteToY, + Canvas canvas, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ) { + canvas.drawCircle( + Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)), + 5, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); + } + + @override + void onTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + super.onTap(details, epochFromX, quoteFromY, epochToX, quoteToY); + + if (startPoint == null) { + startPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + } else { + endPoint ??= EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); } } @@ -203,17 +268,21 @@ class LineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, ) { + if (startPoint == null || endPoint == null) { + return; + } + // Get the drag delta in screen coordinates final Offset delta = details.delta; // Convert start and end points to screen coordinates final Offset startOffset = Offset( - epochToX(startPoint.epoch), - quoteToY(startPoint.quote), + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), ); final Offset endOffset = Offset( - epochToX(endPoint.epoch), - quoteToY(endPoint.quote), + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), ); // Apply the delta to get new screen coordinates @@ -246,5 +315,8 @@ class LineInteractableDrawing @override LineDrawingToolConfig getUpdatedConfig() => - config.copyWith(edgePoints: [startPoint, endPoint]); + config.copyWith(edgePoints: [ + if (startPoint != null) startPoint!, + if (endPoint != null) endPoint! + ]); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 3553603d7..d20606e01 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -217,7 +217,8 @@ class _InteractiveLayerGestureHandlerState void didUpdateWidget(covariant _InteractiveLayerGestureHandler oldWidget) { super.didUpdateWidget(oldWidget); - if (widget.addingDrawingTool != null) { + if (widget.addingDrawingTool != null && + widget.addingDrawingTool != oldWidget.addingDrawingTool) { updateStateTo( InteractiveAddingToolState( widget.addingDrawingTool!, @@ -413,6 +414,8 @@ class InteractiveAddingToolState extends InteractiveState { final DrawingToolConfig addingTool; + InteractableDrawing? _addingDrawing; + @override DrawingToolState getToolState( InteractableDrawing drawing, @@ -431,7 +434,17 @@ class InteractiveAddingToolState extends InteractiveState { void onPanUpdate(DragUpdateDetails details) {} @override - void onTap(TapUpDetails details) {} + void onTap(TapUpDetails details) { + _addingDrawing ??= addingTool.getInteractableDrawing(); + + _addingDrawing!.onTap( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); + } } abstract class InteractiveLayerBase { From f83f1753fd74a2bd5268384df54052cd5c127f5a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 18:14:41 +0800 Subject: [PATCH 040/311] paint additional drawings from interactive state --- .../interactive_layer/interactive_layer.dart | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index d20606e01..0162e5a5f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -262,6 +262,22 @@ class _InteractiveLayerGestureHandlerState ), )) .toList(), + ..._interactiveState.additionalDrawings + .map((e) => CustomPaint( + foregroundPainter: InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: _interactiveState.getToolState, + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), ], ), ), @@ -293,6 +309,9 @@ abstract class InteractiveState { DrawingToolState getToolState(InteractableDrawing drawing); + /// Additional drawings of the state to be drawn on top of the main drawings. + List> get additionalDrawings => []; + final InteractiveLayerBase interactiveLayer; EpochFromX get epochFromX => interactiveLayer.epochFromX; @@ -416,6 +435,10 @@ class InteractiveAddingToolState extends InteractiveState { InteractableDrawing? _addingDrawing; + @override + List> get additionalDrawings => + [if (_addingDrawing != null) _addingDrawing!]; + @override DrawingToolState getToolState( InteractableDrawing drawing, From dbad2729c022968fdb6d7fd54f48a4f1e12513cc Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 18:34:48 +0800 Subject: [PATCH 041/311] adding drawing tool --- .../interactable_drawing.dart | 17 +++++++---- .../interactive_layer/interactive_layer.dart | 30 ++++++++++++++----- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index 220536328..f45df7646 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -46,13 +46,20 @@ abstract class InteractableDrawing { /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); - /// Called when the drawing tool dragging is started. - void onTap( + /// The tap event that is called when the [InteractableDrawing] is in adding + /// state. + /// + /// the drawing can use the tap to capture and create the coordinates required + /// for its shape. + /// + /// [onDone] is a callback that should be called when the drawing is done. + void onCreateTap( TapUpDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, + VoidCallback onDone, ) { print('onDragStart $runtimeType}'); } @@ -238,15 +245,14 @@ class LineInteractableDrawing } @override - void onTap( + void onCreateTap( TapUpDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, + VoidCallback onDone, ) { - super.onTap(details, epochFromX, quoteFromY, epochToX, quoteToY); - if (startPoint == null) { startPoint = EdgePoint( epoch: epochFromX(details.localPosition.dx), @@ -257,6 +263,7 @@ class LineInteractableDrawing epoch: epochFromX(details.localPosition.dx), quote: quoteFromY(details.localPosition.dy), ); + onDone(); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 0162e5a5f..3cca4b0cd 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -302,6 +302,16 @@ class _InteractiveLayerGestureHandlerState @override QuoteToY get quoteToY => widget.quoteToY; + + @override + void clearAddingDrawing() { + widget.onClearAddingDrawingTool.call(); + } + + @override + void onAddDrawing(InteractableDrawing drawing) { + widget.onAddDrawing?.call(drawing); + } } abstract class InteractiveState { @@ -460,13 +470,15 @@ class InteractiveAddingToolState extends InteractiveState { void onTap(TapUpDetails details) { _addingDrawing ??= addingTool.getInteractableDrawing(); - _addingDrawing!.onTap( - details, - epochFromX, - quoteFromY, - epochToX, - quoteToY, - ); + _addingDrawing! + .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { + interactiveLayer + ..clearAddingDrawing() + ..onAddDrawing(_addingDrawing!) + ..updateStateTo( + InteractiveNormalState(interactiveLayer: interactiveLayer), + ); + }); } } @@ -482,4 +494,8 @@ abstract class InteractiveLayerBase { EpochToX get epochToX; QuoteToY get quoteToY; + + void clearAddingDrawing(); + + void onAddDrawing(InteractableDrawing drawing); } From fec28c28339911444378380b50ce453d5e5ae27a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 18:50:54 +0800 Subject: [PATCH 042/311] move classes to separate files --- .../interactive_layer/interactive_layer.dart | 190 +----------------- .../interactive_layer_base.dart | 32 +++ .../interactive_adding_tool_state.dart | 56 ++++++ .../interactive_normal_state.dart | 46 +++++ .../interactive_selected_tool_state.dart | 65 ++++++ .../interactive_states/interactive_state.dart | 45 +++++ 6 files changed, 248 insertions(+), 186 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 3cca4b0cd..7b5edd3f4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -15,6 +15,10 @@ import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../drawing_tool_chart/drawing_tools.dart'; import 'interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; +import 'interactive_layer_base.dart'; +import 'interactive_states/interactive_adding_tool_state.dart'; +import 'interactive_states/interactive_normal_state.dart'; +import 'interactive_states/interactive_state.dart'; // ignore_for_file: public_member_api_docs /// Interactive layer of the chart package where elements can be drawn and can @@ -313,189 +317,3 @@ class _InteractiveLayerGestureHandlerState widget.onAddDrawing?.call(drawing); } } - -abstract class InteractiveState { - InteractiveState({required this.interactiveLayer}); - - DrawingToolState getToolState(InteractableDrawing drawing); - - /// Additional drawings of the state to be drawn on top of the main drawings. - List> get additionalDrawings => []; - - final InteractiveLayerBase interactiveLayer; - - EpochFromX get epochFromX => interactiveLayer.epochFromX; - - QuoteFromY get quoteFromY => interactiveLayer.quoteFromY; - - EpochToX get epochToX => interactiveLayer.epochToX; - - QuoteToY get quoteToY => interactiveLayer.quoteToY; - - void onTap(TapUpDetails details); - - void onPanUpdate(DragUpdateDetails details); - - void onPanEnd(DragEndDetails details); - - void onPanStart(DragStartDetails details); -} - -class InteractiveNormalState extends InteractiveState { - InteractiveNormalState({required super.interactiveLayer}); - - @override - DrawingToolState getToolState( - InteractableDrawing drawing, - ) => - DrawingToolState.normal; - - @override - void onPanEnd(DragEndDetails details) {} - - @override - void onPanStart(DragStartDetails details) {} - - @override - void onPanUpdate(DragUpdateDetails details) {} - - @override - void onTap(TapUpDetails details) { - for (final drawing in interactiveLayer.drawings) { - if (drawing.hitTest( - details.localPosition, - epochToX, - quoteToY, - )) { - interactiveLayer.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayer: interactiveLayer, - ), - ); - return; - } - } - } -} - -class InteractiveSelectedToolState extends InteractiveState { - InteractiveSelectedToolState({ - required this.selected, - required super.interactiveLayer, - }); - - final InteractableDrawing selected; - - @override - DrawingToolState getToolState( - InteractableDrawing drawing) { - return drawing.config.configId == selected.config.configId - ? DrawingToolState.selected - : DrawingToolState.normal; - } - - @override - void onPanEnd(DragEndDetails details) { - selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); - } - - @override - void onPanStart(DragStartDetails details) { - selected.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); - } - - @override - void onPanUpdate(DragUpdateDetails details) { - selected.onDragUpdate(details, epochFromX, quoteFromY, epochToX, quoteToY); - } - - @override - void onTap(TapUpDetails details) { - for (final drawing in interactiveLayer.drawings) { - if (drawing.hitTest( - details.localPosition, - epochToX, - quoteToY, - )) { - interactiveLayer.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayer: interactiveLayer, - ), - ); - - return; - } - } - - interactiveLayer.updateStateTo( - InteractiveNormalState(interactiveLayer: interactiveLayer), - ); - } -} - -class InteractiveAddingToolState extends InteractiveState { - InteractiveAddingToolState( - this.addingTool, { - required super.interactiveLayer, - }); - - final DrawingToolConfig addingTool; - - InteractableDrawing? _addingDrawing; - - @override - List> get additionalDrawings => - [if (_addingDrawing != null) _addingDrawing!]; - - @override - DrawingToolState getToolState( - InteractableDrawing drawing, - ) => - drawing.config.configId == addingTool.configId - ? DrawingToolState.adding - : DrawingToolState.normal; - - @override - void onPanEnd(DragEndDetails details) {} - - @override - void onPanStart(DragStartDetails details) {} - - @override - void onPanUpdate(DragUpdateDetails details) {} - - @override - void onTap(TapUpDetails details) { - _addingDrawing ??= addingTool.getInteractableDrawing(); - - _addingDrawing! - .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { - interactiveLayer - ..clearAddingDrawing() - ..onAddDrawing(_addingDrawing!) - ..updateStateTo( - InteractiveNormalState(interactiveLayer: interactiveLayer), - ); - }); - } -} - -abstract class InteractiveLayerBase { - void updateStateTo(InteractiveState state); - - List> get drawings; - - EpochFromX get epochFromX; - - QuoteFromY get quoteFromY; - - EpochToX get epochToX; - - QuoteToY get quoteToY; - - void clearAddingDrawing(); - - void onAddDrawing(InteractableDrawing drawing); -} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart new file mode 100644 index 000000000..79c34d638 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -0,0 +1,32 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; + +import '../chart/data_visualization/chart_data.dart'; +import 'interactable_drawing.dart'; +import 'interactive_states/interactive_state.dart'; + +/// The interactive layer base class interface. +abstract class InteractiveLayerBase { + /// Updates the state of the interactive layer to the [state]. + void updateStateTo(InteractiveState state); + + /// The drawings of the interactive layer. + List> get drawings; + + /// Converts x to epoch. + EpochFromX get epochFromX; + + /// Converts y to quote. + QuoteFromY get quoteFromY; + + /// Converts epoch to x. + EpochToX get epochToX; + + /// Converts quote to y. + QuoteToY get quoteToY; + + /// Clears the adding drawing. + void clearAddingDrawing(); + + /// Adds the [drawing] to the interactive layer. + void onAddDrawing(InteractableDrawing drawing); +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart new file mode 100644 index 000000000..49e71baa8 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -0,0 +1,56 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/widgets.dart'; + +import '../interactable_drawing.dart'; +import 'interactive_normal_state.dart'; +import 'interactive_state.dart'; + +/// The state of the interactive layer when a tool is being added. +class InteractiveAddingToolState extends InteractiveState { + /// Initializes the state with the interactive layer and the [addingTool]. + InteractiveAddingToolState( + this.addingTool, { + required super.interactiveLayer, + }); + + /// The tool being added. + final DrawingToolConfig addingTool; + + InteractableDrawing? _addingDrawing; + + @override + List> get additionalDrawings => + [if (_addingDrawing != null) _addingDrawing!]; + + @override + DrawingToolState getToolState( + InteractableDrawing drawing, + ) => + drawing.config.configId == addingTool.configId + ? DrawingToolState.adding + : DrawingToolState.normal; + + @override + void onPanEnd(DragEndDetails details) {} + + @override + void onPanStart(DragStartDetails details) {} + + @override + void onPanUpdate(DragUpdateDetails details) {} + + @override + void onTap(TapUpDetails details) { + _addingDrawing ??= addingTool.getInteractableDrawing(); + + _addingDrawing! + .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { + interactiveLayer + ..clearAddingDrawing() + ..onAddDrawing(_addingDrawing!) + ..updateStateTo( + InteractiveNormalState(interactiveLayer: interactiveLayer), + ); + }); + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart new file mode 100644 index 000000000..acee3b5e6 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -0,0 +1,46 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/widgets.dart'; + +import '../interactable_drawing.dart'; +import 'interactive_selected_tool_state.dart'; +import 'interactive_state.dart'; + +/// The normal state of the interactive layer. +class InteractiveNormalState extends InteractiveState { + /// Initializes the state with the interactive layer. + InteractiveNormalState({required super.interactiveLayer}); + + @override + DrawingToolState getToolState( + InteractableDrawing drawing, + ) => + DrawingToolState.normal; + + @override + void onPanEnd(DragEndDetails details) {} + + @override + void onPanStart(DragStartDetails details) {} + + @override + void onPanUpdate(DragUpdateDetails details) {} + + @override + void onTap(TapUpDetails details) { + for (final drawing in interactiveLayer.drawings) { + if (drawing.hitTest( + details.localPosition, + epochToX, + quoteToY, + )) { + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayer: interactiveLayer, + ), + ); + return; + } + } + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart new file mode 100644 index 000000000..e284d9c78 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -0,0 +1,65 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/widgets.dart'; + +import '../interactable_drawing.dart'; +import 'interactive_normal_state.dart'; +import 'interactive_state.dart'; + +/// The state of the interactive layer when a tool is selected. +class InteractiveSelectedToolState extends InteractiveState { + /// Initializes the state with the interactive layer and the [selected] tool. + InteractiveSelectedToolState({ + required this.selected, + required super.interactiveLayer, + }); + + /// The selected tool. + final InteractableDrawing selected; + + @override + DrawingToolState getToolState( + InteractableDrawing drawing) { + return drawing.config.configId == selected.config.configId + ? DrawingToolState.selected + : DrawingToolState.normal; + } + + @override + void onPanEnd(DragEndDetails details) { + selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onPanStart(DragStartDetails details) { + selected.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onPanUpdate(DragUpdateDetails details) { + selected.onDragUpdate(details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onTap(TapUpDetails details) { + for (final drawing in interactiveLayer.drawings) { + if (drawing.hitTest( + details.localPosition, + epochToX, + quoteToY, + )) { + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayer: interactiveLayer, + ), + ); + + return; + } + } + + interactiveLayer.updateStateTo( + InteractiveNormalState(interactiveLayer: interactiveLayer), + ); + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart new file mode 100644 index 000000000..c038e080c --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -0,0 +1,45 @@ +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:flutter/widgets.dart'; + +import '../interactable_drawing.dart'; +import '../interactive_layer_base.dart'; + +/// The state of the interactive layer. +abstract class InteractiveState { + /// Initializes the state with the interactive layer. + InteractiveState({required this.interactiveLayer}); + + /// Returns the state of the drawing tool. + DrawingToolState getToolState(InteractableDrawing drawing); + + /// Additional drawings of the state to be drawn on top of the main drawings. + List> get additionalDrawings => []; + + /// The interactive layer. + final InteractiveLayerBase interactiveLayer; + + /// Converts x to epoch. + EpochFromX get epochFromX => interactiveLayer.epochFromX; + + /// Converts y to quote. + QuoteFromY get quoteFromY => interactiveLayer.quoteFromY; + + /// Converts epoch to x. + EpochToX get epochToX => interactiveLayer.epochToX; + + /// Converts quote to y. + QuoteToY get quoteToY => interactiveLayer.quoteToY; + + /// Handles tap event. + void onTap(TapUpDetails details); + + /// Handles pan update event. + void onPanUpdate(DragUpdateDetails details); + + /// Handles pan end event. + void onPanEnd(DragEndDetails details); + + /// Handles pan start event. + void onPanStart(DragStartDetails details); +} From 925aa5a7ed27602652ac280f36a24e7000aeb428 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 4 Mar 2025 23:57:49 +0800 Subject: [PATCH 043/311] fix drawing null id --- lib/src/deriv_chart/deriv_chart.dart | 2 +- .../interactive_layer/interactive_layer.dart | 12 ++++++++---- .../interactive_layer/interactive_layer_base.dart | 2 +- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 1fe2543d1..c8fb0dc37 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -262,7 +262,7 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { _drawingTools - ..init() + // ..init() ..drawingToolsRepo = _drawingToolsRepo; }); showDialog( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 7b5edd3f4..c4009cf4d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -129,8 +129,12 @@ class _InteractiveLayerState extends State { }); } - void _addDrawingToRepo(InteractableDrawing drawing) => - widget.drawingToolsRepo.add(drawing.getUpdatedConfig()); + void _addDrawingToRepo(InteractableDrawing drawing) => + widget.drawingToolsRepo.add( + drawing.getUpdatedConfig().copyWith( + configId: DateTime.now().millisecondsSinceEpoch.toString(), + ), + ); @override void dispose() { @@ -177,7 +181,7 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { final List drawings; final Function(InteractableDrawing)? onSaveDrawingChange; - final Function(InteractableDrawing)? onAddDrawing; + final Function(InteractableDrawing)? onAddDrawing; final DrawingToolConfig? addingDrawingTool; @@ -313,7 +317,7 @@ class _InteractiveLayerGestureHandlerState } @override - void onAddDrawing(InteractableDrawing drawing) { + void onAddDrawing(InteractableDrawing drawing) { widget.onAddDrawing?.call(drawing); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 79c34d638..23611c3cf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -28,5 +28,5 @@ abstract class InteractiveLayerBase { void clearAddingDrawing(); /// Adds the [drawing] to the interactive layer. - void onAddDrawing(InteractableDrawing drawing); + void onAddDrawing(InteractableDrawing drawing); } From 5d21ea80dd72c2982aac94e658f66f20885fd383 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 10:10:55 +0800 Subject: [PATCH 044/311] save drawing's drag changes on repository --- .../interactive_layer/interactive_layer.dart | 15 +++++++++------ .../interactive_layer/interactive_layer_base.dart | 4 ++++ .../interactive_selected_tool_state.dart | 1 + 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index c4009cf4d..b16ddc956 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -125,6 +125,8 @@ class _InteractiveLayerState extends State { } // Update the config in the repository + final config = drawing.getUpdatedConfig(); + print('#### Updated config ${config.toJson()}'); repo.updateAt(index, drawing.getUpdatedConfig()); }); } @@ -312,12 +314,13 @@ class _InteractiveLayerGestureHandlerState QuoteToY get quoteToY => widget.quoteToY; @override - void clearAddingDrawing() { - widget.onClearAddingDrawingTool.call(); - } + void clearAddingDrawing() => widget.onClearAddingDrawingTool.call(); @override - void onAddDrawing(InteractableDrawing drawing) { - widget.onAddDrawing?.call(drawing); - } + void onAddDrawing(InteractableDrawing drawing) => + widget.onAddDrawing?.call(drawing); + + @override + void onSaveDrawing(InteractableDrawing drawing) => + widget.onSaveDrawingChange?.call(drawing); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 23611c3cf..5864cbeea 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -29,4 +29,8 @@ abstract class InteractiveLayerBase { /// Adds the [drawing] to the interactive layer. void onAddDrawing(InteractableDrawing drawing); + + /// Save the drawings with the latest changes (positions or anything) to the + /// repository. + void onSaveDrawing(InteractableDrawing drawing); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index e284d9c78..130b067c1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -27,6 +27,7 @@ class InteractiveSelectedToolState extends InteractiveState { @override void onPanEnd(DragEndDetails details) { selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); + interactiveLayer.onSaveDrawing(selected); } @override From 3907da2f996617e8c63bb09da6a0a19bef6e6b75 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 10:33:49 +0800 Subject: [PATCH 045/311] add docs for interactive states --- .../interactive_layer/interactive_layer.dart | 2 +- .../interactive_adding_tool_state.dart | 22 +++++++- .../interactive_normal_state.dart | 10 ++++ .../interactive_selected_tool_state.dart | 16 ++++++ .../interactive_states/interactive_state.dart | 52 +++++++++++++++++-- 5 files changed, 95 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index b16ddc956..43712e669 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -272,7 +272,7 @@ class _InteractiveLayerGestureHandlerState ), )) .toList(), - ..._interactiveState.additionalDrawings + ..._interactiveState.previewDrawings .map((e) => CustomPaint( foregroundPainter: InteractableDrawingCustomPainter( drawing: e, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index 49e71baa8..d389aea26 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -6,20 +6,40 @@ import 'interactive_normal_state.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is being added. +/// +/// This class represents the state of the [InteractiveLayer] when a new drawing tool +/// is being added to the chart. In this state, tapping on the chart will create a new +/// drawing of the specified type. +/// +/// After the drawing is created, the interactive layer transitions back to the +/// [InteractiveNormalState]. class InteractiveAddingToolState extends InteractiveState { /// Initializes the state with the interactive layer and the [addingTool]. + /// + /// The [addingTool] parameter specifies the configuration for the type of drawing + /// tool that will be created when the user taps on the chart. + /// + /// The [interactiveLayer] parameter is passed to the superclass and provides + /// access to the layer's methods and properties. InteractiveAddingToolState( this.addingTool, { required super.interactiveLayer, }); /// The tool being added. + /// + /// This configuration defines the type of drawing that will be created + /// when the user taps on the chart. final DrawingToolConfig addingTool; + /// The drawing that is currently being created. + /// + /// This is initialized when the user first taps on the chart and is used + /// to render a preview of the drawing being added. InteractableDrawing? _addingDrawing; @override - List> get additionalDrawings => + List> get previewDrawings => [if (_addingDrawing != null) _addingDrawing!]; @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index acee3b5e6..1495a195f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -6,8 +6,18 @@ import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; /// The normal state of the interactive layer. +/// +/// This class represents the default state of the [InteractiveLayer] when no tools +/// are selected or being added. In this state, tapping on a drawing will select it +/// and transition to the [InteractiveSelectedToolState]. +/// +/// This is the initial state of the interactive layer and the state it returns to +/// when a tool is deselected or after a tool has been added. class InteractiveNormalState extends InteractiveState { /// Initializes the state with the interactive layer. + /// + /// The [interactiveLayer] parameter is passed to the superclass and provides + /// access to the layer's methods and properties. InteractiveNormalState({required super.interactiveLayer}); @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 130b067c1..c55879eb3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -6,14 +6,30 @@ import 'interactive_normal_state.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is selected. +/// +/// This class represents the state of the [InteractiveLayer] when a drawing tool +/// is selected by the user. In this state, the selected tool can be manipulated +/// through drag gestures, and tapping on empty space will return to the normal state. +/// +/// It handles user interactions specifically for when a drawing tool is selected, +/// providing appropriate responses to gestures and maintaining the selected state. class InteractiveSelectedToolState extends InteractiveState { /// Initializes the state with the interactive layer and the [selected] tool. + /// + /// The [selected] parameter is the drawing tool that has been selected by the user + /// and will respond to manipulation gestures. + /// + /// The [interactiveLayer] parameter is passed to the superclass and provides + /// access to the layer's methods and properties. InteractiveSelectedToolState({ required this.selected, required super.interactiveLayer, }); /// The selected tool. + /// + /// This is the drawing tool that is currently selected and will respond to + /// manipulation gestures. It will be rendered with a selected appearance. final InteractableDrawing selected; @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart index c038e080c..9ed01d47c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -6,29 +6,71 @@ import '../interactable_drawing.dart'; import '../interactive_layer_base.dart'; /// The state of the interactive layer. +/// +/// This abstract class defines the interface for different states that the [InteractiveLayer] +/// can be in. It allows the interactive layer to change its behavior dynamically by +/// switching between different states. +/// +/// There are three main states implemented: +/// * [InteractiveNormalState]: The default state where no tools are selected or being added +/// * [InteractiveSelectedToolState]: Activated when a tool is selected, enabling manipulation +/// * [InteractiveAddingToolState]: Active when a new tool is being created +/// +/// Each state handles user interactions (tap, pan events) differently and can transition +/// to other states using [InteractiveLayerBase.updateStateTo]. abstract class InteractiveState { /// Initializes the state with the interactive layer. + /// + /// The [interactiveLayer] parameter provides a reference to the layer that owns + /// this state, allowing the state to call methods on the layer such as updating + /// to a new state or adding/saving drawings. InteractiveState({required this.interactiveLayer}); /// Returns the state of the drawing tool. + /// + /// This method determines the visual and behavioral state of a specific drawing tool. + /// Each concrete state implementation returns different [DrawingToolState] values: DrawingToolState getToolState(InteractableDrawing drawing); /// Additional drawings of the state to be drawn on top of the main drawings. - List> get additionalDrawings => []; + /// + /// Returns a list of additional drawings specific to the current state. + /// The default implementation returns an empty list, but subclasses can override + /// this to provide state-specific drawings (e.g., a tool being added in + /// [InteractiveAddingToolState]). + /// + /// These are usually temporary/preview drawings that a state might want to + /// render on top of the main drawings. + List> get previewDrawings => []; /// The interactive layer. + /// + /// A reference to the layer that owns this state, allowing the state to + /// access layer properties and methods. final InteractiveLayerBase interactiveLayer; - /// Converts x to epoch. + /// Converts x coordinate (in pixels) to epoch timestamp. + /// + /// This is a convenience getter that provides access to the coordinate + /// conversion function from the interactive layer. EpochFromX get epochFromX => interactiveLayer.epochFromX; - /// Converts y to quote. + /// Converts y coordinate (in pixels) to quote value. + /// + /// This is a convenience getter that provides access to the coordinate + /// conversion function from the interactive layer. QuoteFromY get quoteFromY => interactiveLayer.quoteFromY; - /// Converts epoch to x. + /// Converts epoch timestamp to x coordinate (in pixels). + /// + /// This is a convenience getter that provides access to the coordinate + /// conversion function from the interactive layer. EpochToX get epochToX => interactiveLayer.epochToX; - /// Converts quote to y. + /// Converts quote value to y coordinate (in pixels). + /// + /// This is a convenience getter that provides access to the coordinate + /// conversion function from the interactive layer. QuoteToY get quoteToY => interactiveLayer.quoteToY; /// Handles tap event. From 894a1e84bdc9fc8bc4c82b39f24f2c78b15da47b Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 10:37:28 +0800 Subject: [PATCH 046/311] add docs for DrawingToolState --- .../interactable_drawing.dart | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index f45df7646..d306acdc9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -9,11 +9,34 @@ import '../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../chart/data_visualization/models/animation_info.dart'; import 'interactable_drawing_custom_painter.dart'; +/// Represents the current state of a drawing tool on the chart. +/// +/// The state determines how the drawing tool is rendered and how it responds +/// to user interactions. Different states trigger different visual appearances +/// and interaction behaviors. enum DrawingToolState { + /// Default state when the drawing tool is displayed on the chart + /// but not being interacted with. normal, + + /// The drawing tool is currently selected by the user. Selected tools + /// typically show additional visual cues like handles or a glowy effect + /// to indicate they can be manipulated. selected, + + /// The user's pointer is hovering over the drawing tool but hasn't + /// selected it yet. This state can be used to provide visual feedback + /// before selection. hovered, + + /// The drawing tool is in the process of being created/added to the chart. + /// In this state, the tool captures user inputs (like taps) to define + /// its shape and position. adding, + + /// The drawing tool is being actively moved or resized by the user. + /// This state is active during drag operations when the user is + /// modifying the tool's position. dragging, } From 66a9fc518c6c5eca19c8dd7209c89d57b6d93f70 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 11:04:35 +0800 Subject: [PATCH 047/311] update docs --- doc/how_chart_lib_works.md | 26 ++++++- doc/images/interactive_layer.png | Bin 0 -> 73390 bytes doc/interactive_layer.md | 115 +++++++++++++++++++++++++++++++ 3 files changed, 140 insertions(+), 1 deletion(-) create mode 100644 doc/images/interactive_layer.png create mode 100644 doc/interactive_layer.md diff --git a/doc/how_chart_lib_works.md b/doc/how_chart_lib_works.md index cfd8e75a3..481327759 100644 --- a/doc/how_chart_lib_works.md +++ b/doc/how_chart_lib_works.md @@ -208,4 +208,28 @@ CustomDraggableSheet is a wrapper widget to be used combined with a bottom sheet ## Drawing Tool Chart -For brief explanation of how drawing tools work, please refer to [Drawing Tools](drawing_tools.md) section. +### Drawing Tools + +For a brief explanation of how drawing tools work, please refer to [Drawing Tools](drawing_tools.md) section. + +### Interactive Layer (New Implementation) + +The chart implements a new Interactive Layer that manages user interactions with drawing tools. This new implementation will replace the previous drawing tools handling mechanism, which will be deprecated and removed in future versions. + +The Interactive Layer: + +- Handles user gestures (taps, drags, hovers) on the chart +- Manages the lifecycle of drawing tools from creation to manipulation +- Implements a state pattern to handle different interaction modes +- Controls the visual appearance of drawing tools based on their state +- Provides a more maintainable and extensible architecture for drawing tools + +The Interactive Layer uses different states to manage interactions: + +1. **Normal State**: Default state when no tools are selected +2. **Selected Tool State**: Active when a drawing tool is selected +3. **Adding Tool State**: Active when a new drawing tool is being created + +Each drawing tool also has its own state (normal, selected, hovered, adding, dragging) that determines how it's rendered and how it responds to user interactions. + +For a detailed explanation of the Interactive Layer architecture and state management, see [Interactive Layer](interactive_layer.md). diff --git a/doc/images/interactive_layer.png b/doc/images/interactive_layer.png new file mode 100644 index 0000000000000000000000000000000000000000..5a484d3eec1f8a8f6189a4999409ed920395599b GIT binary patch literal 73390 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 literal 0 HcmV?d00001 diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md new file mode 100644 index 000000000..a9ee1d14d --- /dev/null +++ b/doc/interactive_layer.md @@ -0,0 +1,115 @@ +# Interactive Layer + +The Interactive Layer is a crucial component of the Deriv Chart that handles user interactions with drawing tools. It manages the lifecycle of drawing tools, from creation to manipulation, and provides a state-based architecture to handle different interaction modes. + +## Overview + +The Interactive Layer sits on top of the chart canvas and captures user gestures such as taps, drags, and hovers. It then interprets these gestures based on the current state and translates them into actions on drawing tools. + +The layer works with two key concepts: +1. **InteractiveState**: Defines the current mode of interaction with the chart +2. **DrawingToolState**: Represents the state of individual drawing tools + +## Interactive States + +The Interactive Layer implements a state pattern to manage different interaction modes. Each state handles user interactions differently: + +### InteractiveNormalState + +This is the default state when no drawing tools are selected or being added. In this state: +- The user can tap on existing drawing tools to select them +- The user can initiate adding a new drawing tool +- All drawing tools are in the `DrawingToolState.normal` state + +### InteractiveSelectedToolState + +This state is active when a drawing tool is selected. In this state: +- The selected tool is in the `DrawingToolState.selected` state +- The user can drag the selected tool to move it +- The user can modify specific points of the selected tool +- Tapping outside the selected tool returns to the `InteractiveNormalState` + +### InteractiveAddingToolState + +This state is active when a new drawing tool is being added to the chart. In this state: +- The new tool is in the `DrawingToolState.adding` state +- The user can tap on the chart to define points for the new tool (e.g., start and end points for a line) +- Once the tool creation is complete, the state transitions back to `InteractiveNormalState` + +## State Transitions + +The Interactive Layer manages transitions between states based on user interactions: + +![Interactive Layer State Transitions](images/interactive_layer.png) + +The diagram above illustrates the state transitions in the Interactive Layer: + +1. **NormalState → SelectedToolState**: Occurs when the user taps on or starts dragging an existing drawing tool +2. **SelectedToolState → NormalState**: Occurs when the user taps outside the selected tool +3. **NormalState → AddingToolState**: Occurs when the user initiates adding a new drawing tool +4. **AddingToolState → NormalState**: Occurs when the new tool creation is complete + +## DrawingToolState + +Each drawing tool on the chart has its own state, represented by the `DrawingToolState` enum: + +```dart +enum DrawingToolState { + /// Default state when the drawing tool is displayed on the chart + /// but not being interacted with. + normal, + + /// The drawing tool is currently selected by the user. Selected tools + /// typically show additional visual cues like handles or a glowy effect + /// to indicate they can be manipulated. + selected, + + /// The user's pointer is hovering over the drawing tool but hasn't + /// selected it yet. This state can be used to provide visual feedback + /// before selection. + hovered, + + /// The drawing tool is in the process of being created/added to the chart. + /// In this state, the tool captures user inputs (like taps) to define + /// its shape and position. + adding, + + /// The drawing tool is being actively moved or resized by the user. + /// This state is active during drag operations when the user is + /// modifying the tool's position. + dragging, +} +``` + +The state of a drawing tool affects how it's rendered on the chart and how it responds to user interactions. + +## InteractableDrawing + +The `InteractableDrawing` class is the base class for all drawing tools that can be interacted with on the chart. It: + +1. Maintains the current state of the drawing tool +2. Provides methods for hit testing (determining if a user tap/drag intersects with the tool) +3. Handles drag operations to move or modify the tool +4. Defines how the tool is painted on the canvas based on its current state + +Each specific drawing tool (like `LineInteractableDrawing`) extends this class to implement its own behavior for: +- Hit testing specific to its shape +- Handling drag operations in a way that makes sense for its geometry +- Painting itself with appropriate visual styles based on its state + +## Implementation Details + +The Interactive Layer uses a combination of gesture detectors and custom painters to: + +1. Capture user interactions (taps, drags, hovers) +2. Determine which drawing tools are affected by these interactions +3. Update the state of the Interactive Layer and individual drawing tools +4. Render the drawing tools with appropriate visual styles + +When a user interacts with the chart, the Interactive Layer: +1. Determines the current state +2. Delegates the handling of the interaction to the current state object +3. The state object updates the affected drawing tools +4. The drawing tools are repainted with their new states and positions + +This architecture provides a clean separation of concerns and makes it easy to add new interaction modes or drawing tool types. \ No newline at end of file From 75f6732f1869b382cbdc7de6c59fb46aeae8ab3d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 12:17:36 +0800 Subject: [PATCH 048/311] change the behaviour of selecting/deselecting on dragging --- lib/src/deriv_chart/chart/main_chart.dart | 4 +-- .../interactive_normal_state.dart | 22 +++++++++++- .../interactive_selected_tool_state.dart | 35 +++++++++++++++++-- .../interactive_states/interactive_state.dart | 18 ++++++++++ 4 files changed, 74 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 87ff66c91..aedff4851 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -369,8 +369,8 @@ class _ChartImplementationState extends BasicChartState { epochFromCanvasX: xAxis.epochFromX, ), if (kIsWeb) _buildCrosshairAreaWeb(), - if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) - _buildCrosshairArea(), + // if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) + // _buildCrosshairArea(), if (widget.showScrollToLastTickButton && _isScrollToLastTickAvailable) Positioned( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index 1495a195f..dbbd117cc 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -30,7 +30,27 @@ class InteractiveNormalState extends InteractiveState { void onPanEnd(DragEndDetails details) {} @override - void onPanStart(DragStartDetails details) {} + void onPanStart(DragStartDetails details) { + for (final drawing in interactiveLayer.drawings) { + if (drawing.hitTest( + details.localPosition, + epochToX, + quoteToY, + )) { + final newState = InteractiveSelectedToolState( + selected: drawing, + interactiveLayer: interactiveLayer, + ); + + interactiveLayer.updateStateTo(newState); + + newState.onPanStart(details); + + // drawing.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); + return; + } + } + } @override void onPanUpdate(DragUpdateDetails details) {} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index c55879eb3..e954ac497 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -32,6 +32,8 @@ class InteractiveSelectedToolState extends InteractiveState { /// manipulation gestures. It will be rendered with a selected appearance. final InteractableDrawing selected; + bool _draggingStartedOnTool = false; + @override DrawingToolState getToolState( InteractableDrawing drawing) { @@ -43,17 +45,46 @@ class InteractiveSelectedToolState extends InteractiveState { @override void onPanEnd(DragEndDetails details) { selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); + _draggingStartedOnTool = false; interactiveLayer.onSaveDrawing(selected); } @override void onPanStart(DragStartDetails details) { - selected.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); + if (selected.hitTest(details.localPosition, epochToX, quoteToY)) { + _draggingStartedOnTool = true; + selected.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); + } else { + for (final drawing in interactiveLayer.drawings) { + if (drawing.hitTest( + details.localPosition, + epochToX, + quoteToY, + )) { + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayer: interactiveLayer, + )..onPanStart(details), + ); + + return; + } + } + } } @override void onPanUpdate(DragUpdateDetails details) { - selected.onDragUpdate(details, epochFromX, quoteFromY, epochToX, quoteToY); + if (_draggingStartedOnTool) { + selected.onDragUpdate( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); + } } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart index 9ed01d47c..c676b8167 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -85,3 +85,21 @@ abstract class InteractiveState { /// Handles pan start event. void onPanStart(DragStartDetails details); } + +/// Mixin that provides utility methods for interactive states. +mixin InteractiveStateMixin on InteractiveState { + /// Returns the drawing that was hit by the tap event. + /// Returns null if no drawing was hit. + InteractableDrawing? anyDrawingHit(Offset hitOffset) { + for (final drawing in interactiveLayer.drawings) { + if (drawing.hitTest( + hitOffset, + epochToX, + quoteToY, + )) { + return drawing; + } + } + return null; + } +} From d2b3953c8e78844f7ec62dd23592e7785b31a3f3 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 13:11:27 +0800 Subject: [PATCH 049/311] create extension to put commond logic there --- .../interactive_normal_state.dart | 55 ++++++++--------- .../interactive_selected_tool_state.dart | 60 +++++++++---------- .../interactive_states/interactive_state.dart | 4 +- 3 files changed, 55 insertions(+), 64 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index dbbd117cc..55e7a6870 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -31,25 +31,21 @@ class InteractiveNormalState extends InteractiveState { @override void onPanStart(DragStartDetails details) { - for (final drawing in interactiveLayer.drawings) { - if (drawing.hitTest( - details.localPosition, - epochToX, - quoteToY, - )) { - final newState = InteractiveSelectedToolState( - selected: drawing, - interactiveLayer: interactiveLayer, - ); + final InteractableDrawing? hitDrawing = + anyDrawingHit(details.localPosition); - interactiveLayer.updateStateTo(newState); + if (hitDrawing == null) { + return; + } - newState.onPanStart(details); + final InteractiveState newState = InteractiveSelectedToolState( + selected: hitDrawing, + interactiveLayer: interactiveLayer, + ); - // drawing.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); - return; - } - } + interactiveLayer.updateStateTo(newState); + + newState.onPanStart(details); } @override @@ -57,20 +53,19 @@ class InteractiveNormalState extends InteractiveState { @override void onTap(TapUpDetails details) { - for (final drawing in interactiveLayer.drawings) { - if (drawing.hitTest( - details.localPosition, - epochToX, - quoteToY, - )) { - interactiveLayer.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayer: interactiveLayer, - ), - ); - return; - } + final InteractableDrawing? hitDrawing = anyDrawingHit( + details.localPosition, + ); + + if (hitDrawing == null) { + return; } + + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: hitDrawing, + interactiveLayer: interactiveLayer, + ), + ); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index e954ac497..944f8ca71 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawing.dart'; @@ -55,21 +56,18 @@ class InteractiveSelectedToolState extends InteractiveState { _draggingStartedOnTool = true; selected.onDragStart(details, epochFromX, quoteFromY, epochToX, quoteToY); } else { - for (final drawing in interactiveLayer.drawings) { - if (drawing.hitTest( - details.localPosition, - epochToX, - quoteToY, - )) { - interactiveLayer.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayer: interactiveLayer, - )..onPanStart(details), - ); + final InteractableDrawing? hitDrawing = + anyDrawingHit(details.localPosition); - return; - } + // If a tool is selected, but user starts dragging on another tool + // Switch the selected tool + if (hitDrawing != null) { + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: hitDrawing, + interactiveLayer: interactiveLayer, + )..onPanStart(details), + ); } } } @@ -89,25 +87,23 @@ class InteractiveSelectedToolState extends InteractiveState { @override void onTap(TapUpDetails details) { - for (final drawing in interactiveLayer.drawings) { - if (drawing.hitTest( - details.localPosition, - epochToX, - quoteToY, - )) { - interactiveLayer.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayer: interactiveLayer, - ), - ); + final InteractableDrawing? hitDrawing = + anyDrawingHit(details.localPosition); - return; - } + if (hitDrawing != null) { + // when a tool is tap/hit, keep selected state. it might be the same + // tool or a different tool. + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: hitDrawing, + interactiveLayer: interactiveLayer, + ), + ); + } else { + // If tap is on empty space, return to normal state. + interactiveLayer.updateStateTo( + InteractiveNormalState(interactiveLayer: interactiveLayer), + ); } - - interactiveLayer.updateStateTo( - InteractiveNormalState(interactiveLayer: interactiveLayer), - ); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart index c676b8167..a4197c395 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -86,8 +86,8 @@ abstract class InteractiveState { void onPanStart(DragStartDetails details); } -/// Mixin that provides utility methods for interactive states. -mixin InteractiveStateMixin on InteractiveState { +/// Extension that provides utility methods for interactive states. +extension InteractiveStateExtension on InteractiveState { /// Returns the drawing that was hit by the tap event. /// Returns null if no drawing was hit. InteractableDrawing? anyDrawingHit(Offset hitOffset) { From 004dddadde0c696975a2b976a121245af942e4ae Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 13:58:09 +0800 Subject: [PATCH 050/311] add hover state and handle in line tool --- .../interactable_drawing.dart | 3 +- .../interactive_layer/interactive_layer.dart | 89 ++++++++++--------- .../Interactive_hover_state.dart | 38 ++++++++ .../interactive_normal_state.dart | 11 +-- .../interactive_states/interactive_state.dart | 12 ++- 5 files changed, 98 insertions(+), 55 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index d306acdc9..09ef3f848 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -225,7 +225,8 @@ class LineInteractableDrawing canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected - if (state == DrawingToolState.selected) { + if (state == DrawingToolState.selected || + state == DrawingToolState.hovered) { const double markerRadius = 5; canvas ..drawCircle( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 43712e669..09d0ac2af 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -246,49 +246,52 @@ class _InteractiveLayerGestureHandlerState Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); return Semantics( - child: GestureDetector( - onTapUp: (details) => _interactiveState.onTap(details), - onPanStart: (details) => _interactiveState.onPanStart(details), - onPanUpdate: (details) => _interactiveState.onPanUpdate(details), - onPanEnd: (details) => _interactiveState.onPanEnd(details), - // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement - // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. - child: Stack( - fit: StackFit.expand, - children: [ - ...widget.drawings - .map((e) => CustomPaint( - foregroundPainter: InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - getDrawingState: _interactiveState.getToolState, - // onDrawingToolClicked: () => _selectedDrawing = e, - ), - )) - .toList(), - ..._interactiveState.previewDrawings - .map((e) => CustomPaint( - foregroundPainter: InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - getDrawingState: _interactiveState.getToolState, - // onDrawingToolClicked: () => _selectedDrawing = e, - ), - )) - .toList(), - ], + child: MouseRegion( + onHover: (event) => _interactiveState.onHover(event), + child: GestureDetector( + onTapUp: (details) => _interactiveState.onTap(details), + onPanStart: (details) => _interactiveState.onPanStart(details), + onPanUpdate: (details) => _interactiveState.onPanUpdate(details), + onPanEnd: (details) => _interactiveState.onPanEnd(details), + // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement + // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. + child: Stack( + fit: StackFit.expand, + children: [ + ...widget.drawings + .map((e) => CustomPaint( + foregroundPainter: InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: _interactiveState.getToolState, + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), + ..._interactiveState.previewDrawings + .map((e) => CustomPaint( + foregroundPainter: InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: _interactiveState.getToolState, + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), + ], + ), ), ), ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart new file mode 100644 index 000000000..847dd5831 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart @@ -0,0 +1,38 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/gestures.dart'; + +import '../interactable_drawing.dart'; +import 'interactive_state.dart'; + +/// The state of the interactive layer when a tool is hovered. +/// +/// Defined as mixin so that it can be combined with other states meaning that +/// other states can also have hover functionality. +mixin InteractiveHoverState on InteractiveState { + InteractableDrawing? _hoveredTool; + + @override + DrawingToolState getToolState( + InteractableDrawing drawing) { + return drawing == _hoveredTool + ? DrawingToolState.hovered + : DrawingToolState.normal; + } + + @override + void onHover(PointerHoverEvent event) { + super.onHover(event); + + final hoveredTool = anyDrawingHit(event.localPosition); + + if (hoveredTool == _hoveredTool) { + return; + } + + if (hoveredTool != _hoveredTool) { + _hoveredTool = hoveredTool; + } else { + _hoveredTool = null; + } + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index 55e7a6870..b932ec67f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -1,7 +1,9 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawing.dart'; +import 'Interactive_hover_state.dart'; import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; @@ -13,19 +15,14 @@ import 'interactive_state.dart'; /// /// This is the initial state of the interactive layer and the state it returns to /// when a tool is deselected or after a tool has been added. -class InteractiveNormalState extends InteractiveState { +class InteractiveNormalState extends InteractiveState + with InteractiveHoverState { /// Initializes the state with the interactive layer. /// /// The [interactiveLayer] parameter is passed to the superclass and provides /// access to the layer's methods and properties. InteractiveNormalState({required super.interactiveLayer}); - @override - DrawingToolState getToolState( - InteractableDrawing drawing, - ) => - DrawingToolState.normal; - @override void onPanEnd(DragEndDetails details) {} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart index a4197c395..7ba96ad0f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -1,5 +1,6 @@ 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:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawing.dart'; @@ -74,16 +75,19 @@ abstract class InteractiveState { QuoteToY get quoteToY => interactiveLayer.quoteToY; /// Handles tap event. - void onTap(TapUpDetails details); + void onTap(TapUpDetails details) {} /// Handles pan update event. - void onPanUpdate(DragUpdateDetails details); + void onPanUpdate(DragUpdateDetails details) {} /// Handles pan end event. - void onPanEnd(DragEndDetails details); + void onPanEnd(DragEndDetails details) {} /// Handles pan start event. - void onPanStart(DragStartDetails details); + void onPanStart(DragStartDetails details) {} + + /// Handles hover event. + void onHover(PointerHoverEvent event) {} } /// Extension that provides utility methods for interactive states. From f1ae8676b4bd398ae24480415262531941f8cc39 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 14:09:01 +0800 Subject: [PATCH 051/311] update docs --- doc/images/interactive_layer.png | Bin 73390 -> 0 bytes doc/images/interactive_layer_2.png | Bin 0 -> 48342 bytes doc/interactive_layer.md | 16 +++++++++++++++- 3 files changed, 15 insertions(+), 1 deletion(-) delete mode 100644 doc/images/interactive_layer.png create mode 100644 doc/images/interactive_layer_2.png diff --git a/doc/images/interactive_layer.png b/doc/images/interactive_layer.png deleted file mode 100644 index 5a484d3eec1f8a8f6189a4999409ed920395599b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 73390 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 diff --git a/doc/images/interactive_layer_2.png b/doc/images/interactive_layer_2.png new file mode 100644 index 0000000000000000000000000000000000000000..a4a9b3cc48583c07d25028730cd29e0c071742f6 GIT binary patch literal 48342 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%0D9ASPA_ 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 literal 0 HcmV?d00001 diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index a9ee1d14d..0b6fe7243 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -20,6 +20,7 @@ This is the default state when no drawing tools are selected or being added. In - The user can tap on existing drawing tools to select them - The user can initiate adding a new drawing tool - All drawing tools are in the `DrawingToolState.normal` state +- Includes hover functionality through the `InteractiveHoverState` mixin ### InteractiveSelectedToolState @@ -28,6 +29,7 @@ This state is active when a drawing tool is selected. In this state: - The user can drag the selected tool to move it - The user can modify specific points of the selected tool - Tapping outside the selected tool returns to the `InteractiveNormalState` +- Includes hover functionality through the `InteractiveHoverState` mixin ### InteractiveAddingToolState @@ -36,11 +38,21 @@ This state is active when a new drawing tool is being added to the chart. In thi - The user can tap on the chart to define points for the new tool (e.g., start and end points for a line) - Once the tool creation is complete, the state transitions back to `InteractiveNormalState` +### InteractiveHoverState + +This is implemented as a mixin rather than a standalone state, allowing it to be combined with other states: +- Provides hover detection functionality to any state that includes it +- Changes a drawing tool's state to `DrawingToolState.hovered` when the pointer hovers over it +- Reverts the tool's state when the pointer moves away +- Currently used by both `InteractiveNormalState` and `InteractiveSelectedToolState` + +This mixin-based approach allows hover functionality to be reused across different states without code duplication, following the composition over inheritance principle. + ## State Transitions The Interactive Layer manages transitions between states based on user interactions: -![Interactive Layer State Transitions](images/interactive_layer.png) +![Interactive Layer State Transitions](images/interactive_layer_2.png) The diagram above illustrates the state transitions in the Interactive Layer: @@ -49,6 +61,8 @@ The diagram above illustrates the state transitions in the Interactive Layer: 3. **NormalState → AddingToolState**: Occurs when the user initiates adding a new drawing tool 4. **AddingToolState → NormalState**: Occurs when the new tool creation is complete +Note that both NormalState and SelectedToolState include the HoverState functionality through the mixin pattern, as shown in the nested boxes in the diagram. + ## DrawingToolState Each drawing tool on the chart has its own state, represented by the `DrawingToolState` enum: From 9797ee233d4e7b568fd714f1da4ef399f4f75353 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 14:14:55 +0800 Subject: [PATCH 052/311] add hover state support to SelectedState --- .../interactive_selected_tool_state.dart | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 944f8ca71..fe9859a96 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawing.dart'; @@ -14,7 +15,8 @@ import 'interactive_state.dart'; /// /// It handles user interactions specifically for when a drawing tool is selected, /// providing appropriate responses to gestures and maintaining the selected state. -class InteractiveSelectedToolState extends InteractiveState { +class InteractiveSelectedToolState extends InteractiveState + with InteractiveHoverState { /// Initializes the state with the interactive layer and the [selected] tool. /// /// The [selected] parameter is the drawing tool that has been selected by the user @@ -37,7 +39,14 @@ class InteractiveSelectedToolState extends InteractiveState { @override DrawingToolState getToolState( - InteractableDrawing drawing) { + InteractableDrawing drawing, + ) { + final hoveredDrawing = super.getToolState(drawing); + + if (hoveredDrawing == DrawingToolState.hovered) { + return DrawingToolState.hovered; + } + return drawing.config.configId == selected.config.configId ? DrawingToolState.selected : DrawingToolState.normal; From 33cdd36af688f8971b230e7fc53f61af39c7f5ff Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 14:25:52 +0800 Subject: [PATCH 053/311] fix lint warnings --- .../deriv_chart/chart/chart_state_mobile.dart | 2 - .../drawing_tools/line/line_drawing.dart | 3 - lib/src/deriv_chart/chart/main_chart.dart | 66 +++++++++---------- lib/src/deriv_chart/deriv_chart.dart | 7 +- .../interactable_drawing.dart | 15 +---- .../interactable_drawing_custom_painter.dart | 17 ++++- .../interactive_layer/interactive_layer.dart | 2 - ...tate.dart => interactive_hover_state.dart} | 0 .../interactive_selected_tool_state.dart | 1 - .../interactive_states/interactive_state.dart | 1 - 10 files changed, 52 insertions(+), 62 deletions(-) rename lib/src/deriv_chart/interactive_layer/interactive_states/{Interactive_hover_state.dart => interactive_hover_state.dart} (100%) diff --git a/lib/src/deriv_chart/chart/chart_state_mobile.dart b/lib/src/deriv_chart/chart/chart_state_mobile.dart index 61edfb8de..5f6c6462a 100644 --- a/lib/src/deriv_chart/chart/chart_state_mobile.dart +++ b/lib/src/deriv_chart/chart/chart_state_mobile.dart @@ -9,8 +9,6 @@ class _ChartStateMobile extends _ChartState { _bottomSectionHeight = _getBottomIndicatorsSectionHeightFraction(widget.bottomConfigs.length); - - print('#### ChartStateMobile initState ${DateTime.now()}'); } @override diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart index af1d148e7..ddda58668 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing.dart @@ -231,9 +231,6 @@ class LineDrawing extends Drawing with LineVectorDrawingMixin { (_startPoint!.isClicked(position, markerRadius) || _endPoint!.isClicked(position, markerRadius)); - print( - 'returnValue: $returnValue distance: $distance lineLength: $lineLength isWithinRange: $isWithinRange distance.abs(): ${distance.abs()} lineStyle.thickness: ${lineStyle.thickness} '); - return returnValue; } } diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index aedff4851..36612bfe6 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -7,7 +7,6 @@ import 'package:deriv_chart/src/models/chart_axis_config.dart'; import 'package:deriv_chart/src/models/tick.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:deriv_chart/src/deriv_chart/chart/crosshair/crosshair_area_web.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/crosshair/crosshair_area.dart'; import 'package:deriv_chart/src/deriv_chart/chart/custom_painters/chart_data_painter.dart'; import 'package:deriv_chart/src/deriv_chart/chart/custom_painters/chart_painter.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/markers/marker_area.dart'; @@ -28,7 +27,6 @@ import 'data_visualization/models/chart_object.dart'; import 'helpers/functions/helper_functions.dart'; import '../../misc/callbacks.dart'; import '../../theme/chart_theme.dart'; -import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tool_chart.dart'; import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; /// The main chart to display in the chart widget. @@ -140,7 +138,7 @@ class _ChartImplementationState extends BasicChartState { late Animation _currentTickBlinkAnimation; // TODO(Rustem): remove crosshair related state - bool _isCrosshairMode = false; + final bool _isCrosshairMode = false; bool get _isScrollToLastTickAvailable => (widget._mainSeries.entries?.isNotEmpty ?? false) && @@ -180,8 +178,6 @@ class _ChartImplementationState extends BasicChartState { verticalPaddingFraction = widget.verticalPaddingFraction!; } - print('#### InteractiveLayer MainChart ${DateTime.now()}'); - _setupController(); } @@ -391,19 +387,19 @@ class _ChartImplementationState extends BasicChartState { }, ); - Widget _buildDrawingToolChart(DrawingTools drawingTools) => - MultipleAnimatedBuilder( - animations: [ - topBoundQuoteAnimationController, - bottomBoundQuoteAnimationController, - ], - builder: (_, Widget? child) => DrawingToolChart( - series: widget.mainSeries as DataSeries, - chartQuoteToCanvasY: chartQuoteToCanvasY, - chartQuoteFromCanvasY: chartQuoteFromCanvasY, - drawingTools: drawingTools, - ), - ); + // Widget _buildDrawingToolChart(DrawingTools drawingTools) => + // MultipleAnimatedBuilder( + // animations: [ + // topBoundQuoteAnimationController, + // bottomBoundQuoteAnimationController, + // ], + // builder: (_, Widget? child) => DrawingToolChart( + // series: widget.mainSeries as DataSeries, + // chartQuoteToCanvasY: chartQuoteToCanvasY, + // chartQuoteFromCanvasY: chartQuoteFromCanvasY, + // drawingTools: drawingTools, + // ), + // ); Widget _buildLoadingAnimation() => LoadingAnimationArea( loadingRightBoundX: widget._mainSeries.input.isEmpty @@ -445,23 +441,23 @@ class _ChartImplementationState extends BasicChartState { ]), ); - Widget _buildCrosshairArea() => AnimatedBuilder( - animation: crosshairZoomOutAnimation, - builder: (BuildContext context, _) => CrosshairArea( - mainSeries: widget.mainSeries as DataSeries, - pipSize: widget.pipSize, - quoteToCanvasY: chartQuoteToCanvasY, - onCrosshairAppeared: () { - _isCrosshairMode = true; - widget.onCrosshairAppeared?.call(); - crosshairZoomOutAnimationController.forward(); - }, - onCrosshairDisappeared: () { - _isCrosshairMode = false; - crosshairZoomOutAnimationController.reverse(); - }, - ), - ); + // Widget _buildCrosshairArea() => AnimatedBuilder( + // animation: crosshairZoomOutAnimation, + // builder: (BuildContext context, _) => CrosshairArea( + // mainSeries: widget.mainSeries as DataSeries, + // pipSize: widget.pipSize, + // quoteToCanvasY: chartQuoteToCanvasY, + // onCrosshairAppeared: () { + // _isCrosshairMode = true; + // widget.onCrosshairAppeared?.call(); + // crosshairZoomOutAnimationController.forward(); + // }, + // onCrosshairDisappeared: () { + // _isCrosshairMode = false; + // crosshairZoomOutAnimationController.reverse(); + // }, + // ), + // ); Widget _buildCrosshairAreaWeb() => CrosshairAreaWeb( mainSeries: widget.mainSeries as DataSeries, diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index c8fb0dc37..12c8995d0 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -261,9 +261,10 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - _drawingTools - // ..init() - ..drawingToolsRepo = _drawingToolsRepo; + // _drawingTools + // // ..init() + // .drawingToolsRepo = _drawingToolsRepo; + _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( context: context, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index 09ef3f848..230b8bbee 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -60,9 +60,6 @@ abstract class InteractableDrawing { /// The drawing tool config. final T config; - @protected - DrawingToolState state = DrawingToolState.normal; - /// Returns the updated config. T getUpdatedConfig(); @@ -83,9 +80,7 @@ abstract class InteractableDrawing { EpochToX epochToX, QuoteToY quoteToY, VoidCallback onDone, - ) { - print('onDragStart $runtimeType}'); - } + ) {} /// Called when the drawing tool dragging is started. void onDragStart( @@ -94,9 +89,7 @@ abstract class InteractableDrawing { QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - ) { - print('onDragStart $runtimeType}'); - } + ) {} /// Called when the drawing tool is dragged and updates the drawing position /// properties based on the dragging [details]. @@ -119,9 +112,7 @@ abstract class InteractableDrawing { QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - ) { - print('onDragEnd $runtimeType'); - } + ) {} /// Paints the drawing tool on the chart. void paint( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 6abd88422..26a6bddfa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,4 +1,3 @@ -import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; @@ -29,18 +28,30 @@ class InteractableDrawingCustomPainter extends CustomPainter { required this.getDrawingState, }); + /// Drawing to paint. final InteractableDrawing drawing; + + /// The main series of the chart. final DataSeries series; + + /// Chart theme. final ChartTheme theme; + + /// Chart's general config. final ChartConfig chartConfig; + + /// Converts x coordinate (in pixels) to epoch timestamp. final int Function(double x) epochFromX; + + /// Converts epoch timestamp to x coordinate (in pixels). final double Function(int x) epochToX; + + /// Converts y coordinate (in pixels) to quote value. final double Function(double y) quoteToY; + /// Converts quote value to y coordinate (in pixels). double Function(double) quoteFromY; - // final Function() onDrawingToolClicked; - /// Returns `true` if the drawing tool is selected. final DrawingToolState Function(InteractableDrawing) getDrawingState; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 09d0ac2af..4ee21e718 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -125,8 +125,6 @@ class _InteractiveLayerState extends State { } // Update the config in the repository - final config = drawing.getUpdatedConfig(); - print('#### Updated config ${config.toJson()}'); repo.updateAt(index, drawing.getUpdatedConfig()); }); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart similarity index 100% rename from lib/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart rename to lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index fe9859a96..17514ddb9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -1,5 +1,4 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; import 'package:flutter/widgets.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart index 7ba96ad0f..491c89b0f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -1,7 +1,6 @@ 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:flutter/gestures.dart'; -import 'package:flutter/widgets.dart'; import '../interactable_drawing.dart'; import '../interactive_layer_base.dart'; From 146946c64d27fb71d0a68cf26febe1e05f519759 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 14:29:15 +0800 Subject: [PATCH 054/311] save latest drawing position on PanUpdate as well --- .../interactive_states/interactive_selected_tool_state.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 17514ddb9..2ef08d066 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -90,6 +90,8 @@ class InteractiveSelectedToolState extends InteractiveState epochToX, quoteToY, ); + + interactiveLayer.onSaveDrawing(selected); } } From 5acc3cd1bec285fc0377c1b5adefec5286f86843 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 15:04:08 +0800 Subject: [PATCH 055/311] udpate dragging in line Drawing tool differentiate between line and points --- .../interactable_drawing.dart | 149 +++++++++++++++--- .../interactive_layer/interactive_layer.dart | 4 + 2 files changed, 127 insertions(+), 26 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index 230b8bbee..e876ba0d7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -141,6 +141,57 @@ class LineInteractableDrawing /// End point of the line. EdgePoint? endPoint; + // Tracks which point is being dragged, if any + // null: dragging the whole line + // true: dragging the start point + // false: dragging the end point + bool? _isDraggingStartPoint; + + @override + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (startPoint == null || endPoint == null) { + return; + } + + // Reset the dragging flag + _isDraggingStartPoint = null; + + // Convert start and end points from epoch/quote to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Check if the drag is starting on one of the endpoints + final double startDistance = (details.localPosition - startOffset).distance; + final double endDistance = (details.localPosition - endOffset).distance; + + // If the drag is starting on the start point + if (startDistance <= hitTestMargin) { + _isDraggingStartPoint = true; + return; + } + + // If the drag is starting on the end point + if (endDistance <= hitTestMargin) { + _isDraggingStartPoint = false; + return; + } + + // If we reach here, the drag is on the line itself, not on a specific point + // _isDraggingStartPoint remains null, indicating we're dragging the whole line + } + @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { if (startPoint == null || endPoint == null) { @@ -297,35 +348,69 @@ class LineInteractableDrawing // Get the drag delta in screen coordinates final Offset delta = details.delta; - // Convert start and end points to screen coordinates - final Offset startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), - ); - final Offset endOffset = Offset( - epochToX(endPoint!.epoch), - quoteToY(endPoint!.quote), - ); + // If we're dragging a specific point (start or end point) + if (_isDraggingStartPoint != null) { + // Get the current point being dragged + EdgePoint pointBeingDragged = + _isDraggingStartPoint! ? startPoint! : endPoint!; - // Apply the delta to get new screen coordinates - final Offset newStartOffset = startOffset + delta; - final Offset newEndOffset = endOffset + delta; + // Get the current screen position of the point + final Offset currentOffset = Offset( + epochToX(pointBeingDragged.epoch), + quoteToY(pointBeingDragged.quote), + ); - // Convert back to epoch and quote coordinates - final int newStartEpoch = epochFromX(newStartOffset.dx); - final double newStartQuote = quoteFromY(newStartOffset.dy); - final int newEndEpoch = epochFromX(newEndOffset.dx); - final double newEndQuote = quoteFromY(newEndOffset.dy); + // Apply the delta to get the new screen position + final Offset newOffset = currentOffset + delta; - // Update the start and end points - startPoint = EdgePoint( - epoch: newStartEpoch, - quote: newStartQuote, - ); - endPoint = EdgePoint( - epoch: newEndEpoch, - quote: newEndQuote, - ); + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Create updated point + final EdgePoint updatedPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + + // Update the appropriate point + if (_isDraggingStartPoint!) { + startPoint = updatedPoint; + } else { + endPoint = updatedPoint; + } + } else { + // We're dragging the whole line + // Convert start and end points to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Apply the delta to get new screen coordinates + final Offset newStartOffset = startOffset + delta; + final Offset newEndOffset = endOffset + delta; + + // Convert back to epoch and quote coordinates + final int newStartEpoch = epochFromX(newStartOffset.dx); + final double newStartQuote = quoteFromY(newStartOffset.dy); + final int newEndEpoch = epochFromX(newEndOffset.dx); + final double newEndQuote = quoteFromY(newEndOffset.dy); + + // Update the start and end points + startPoint = EdgePoint( + epoch: newStartEpoch, + quote: newStartQuote, + ); + endPoint = EdgePoint( + epoch: newEndEpoch, + quote: newEndQuote, + ); + } // Note: The actual config update should be handled by the InteractiveLayer // which has access to the Repository. This method only updates the local @@ -335,6 +420,18 @@ class LineInteractableDrawing // points have changed and update the config in the repository accordingly. } + @override + void onDragEnd( + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + // Reset the dragging flag when drag is complete + _isDraggingStartPoint = null; + } + @override LineDrawingToolConfig getUpdatedConfig() => config.copyWith(edgePoints: [ diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 4ee21e718..e7ba7d7cb 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -92,6 +92,10 @@ class _InteractiveLayerState extends State { } void _setDrawingsFromConfigs() { + if (widget.drawingToolsRepo.items.length == _interactableDrawings.length) { + return; + } + _interactableDrawings.clear(); for (final config in widget.drawingToolsRepo.items) { From 657f81feb70288b21ab8ba141e3e22ca08b2e837 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 16:06:05 +0800 Subject: [PATCH 056/311] improve dragging points --- .../interactive_layer/interactable_drawing.dart | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart index e876ba0d7..7c7c0b016 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart @@ -52,7 +52,7 @@ abstract class InteractableDrawing { /// Initializes [InteractableDrawing]. InteractableDrawing({required this.config}); - static const double _hitTestMargin = 16; + static const double _hitTestMargin = 32; /// The margin for hit testing. double get hitTestMargin => _hitTestMargin; @@ -208,6 +208,15 @@ class LineInteractableDrawing quoteToY(endPoint!.quote), ); + // Check if the pointer is near either endpoint + // Use a slightly larger margin for the endpoints to make them easier to hit + final double startDistance = (offset - startOffset).distance; + final double endDistance = (offset - endOffset).distance; + + if (startDistance <= hitTestMargin || endDistance <= hitTestMargin) { + return true; + } + // Calculate line length final double lineLength = (endOffset - startOffset).distance; @@ -234,7 +243,6 @@ class LineInteractableDrawing dotProduct >= 0 && dotProduct <= lineLength * lineLength; final result = isWithinRange && distance <= hitTestMargin; - // Return true if within range and close enough to line (8 pixel margin) return result; } @@ -304,7 +312,7 @@ class LineInteractableDrawing LineStyle lineStyle, ) { canvas.drawCircle( - Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)), + Offset(epochToX(point.epoch), quoteToY(point.quote)), 5, paintStyle.glowyCirclePaintStyle(lineStyle.color), ); @@ -351,7 +359,7 @@ class LineInteractableDrawing // If we're dragging a specific point (start or end point) if (_isDraggingStartPoint != null) { // Get the current point being dragged - EdgePoint pointBeingDragged = + final EdgePoint pointBeingDragged = _isDraggingStartPoint! ? startPoint! : endPoint!; // Get the current screen position of the point From e47e48145c3c8bb03e4af92e3ab78f4f8da4a593 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 16:19:29 +0800 Subject: [PATCH 057/311] move line interactable to its own file --- .../drawing_tools_ui/drawing_tool_config.dart | 2 +- .../line/line_drawing_tool_config.dart | 3 +- .../interactable_drawing_custom_painter.dart | 2 +- .../interactable_drawing.dart | 122 ++++++++++ .../line_interactable_drawing.dart} | 220 +++++------------- .../interactive_layer/interactive_layer.dart | 2 +- .../interactive_layer_base.dart | 2 +- .../interactive_adding_tool_state.dart | 2 +- .../interactive_hover_state.dart | 2 +- .../interactive_normal_state.dart | 2 +- .../interactive_selected_tool_state.dart | 2 +- .../interactive_states/interactive_state.dart | 2 +- 12 files changed, 185 insertions(+), 178 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart rename lib/src/deriv_chart/interactive_layer/{interactable_drawing.dart => interactable_drawings/line_interactable_drawing.dart} (61%) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index babcaf4da..070538fcc 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -5,7 +5,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_model/point.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:flutter/material.dart'; /// Drawing tools config diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index e0d6017aa..38a9671f2 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -6,7 +6,8 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_ 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/data_model/point.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 26a6bddfa..71278cc16 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,4 +1,4 @@ -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/rendering.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart new file mode 100644 index 000000000..e0cb5a019 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -0,0 +1,122 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/widgets.dart'; + +import '../../chart/data_visualization/chart_data.dart'; +import '../../chart/data_visualization/models/animation_info.dart'; +import '../interactable_drawing_custom_painter.dart'; + +/// Represents the current state of a drawing tool on the chart. +/// +/// The state determines how the drawing tool is rendered and how it responds +/// to user interactions. Different states trigger different visual appearances +/// and interaction behaviors. +enum DrawingToolState { + /// Default state when the drawing tool is displayed on the chart + /// but not being interacted with. + normal, + + /// The drawing tool is currently selected by the user. Selected tools + /// typically show additional visual cues like handles or a glowy effect + /// to indicate they can be manipulated. + selected, + + /// The user's pointer is hovering over the drawing tool but hasn't + /// selected it yet. This state can be used to provide visual feedback + /// before selection. + hovered, + + /// The drawing tool is in the process of being created/added to the chart. + /// In this state, the tool captures user inputs (like taps) to define + /// its shape and position. + adding, + + /// The drawing tool is being actively moved or resized by the user. + /// This state is active during drag operations when the user is + /// modifying the tool's position. + dragging, +} + +/// The class that will be generated by the drawing tool config instance when +/// they are created or the saved ones that are loaded from storage. +/// The information from this class (its subclasses) will be used to draw the +/// tool on the chart. +/// It will keep the latest state of the drawing tool as the user interacts +/// with the tools in the runtime. +/// During the time that user interacts with a tool. by some debounce mechanism +/// This class will update the config which is supposed to be saved in the storage. +abstract class InteractableDrawing { + /// Initializes [InteractableDrawing]. + InteractableDrawing({required this.config}); + + static const double _hitTestMargin = 32; + + /// The margin for hit testing. + double get hitTestMargin => _hitTestMargin; + + /// The drawing tool config. + final T config; + + /// Returns the updated config. + T getUpdatedConfig(); + + /// Returns `true` if the drawing tool is hit by the given offset. + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); + + /// The tap event that is called when the [InteractableDrawing] is in adding + /// state. + /// + /// the drawing can use the tap to capture and create the coordinates required + /// for its shape. + /// + /// [onDone] is a callback that should be called when the drawing is done. + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) {} + + /// Called when the drawing tool dragging is started. + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + /// Called when the drawing tool is dragged and updates the drawing position + /// properties based on the dragging [details]. + /// + /// Each drawing will know how to handle and update itself accordingly based + /// on where the dragging position is like if it's dragging a point or a line + /// of the tool. + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ); + + /// Called when the drawing tool dragging is ended. + void onDragEnd( + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + /// Paints the drawing tool on the chart. + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + GetDrawingState getDrawingState, + ); +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart similarity index 61% rename from lib/src/deriv_chart/interactive_layer/interactable_drawing.dart rename to lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 7c7c0b016..45990c8e2 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,129 +1,13 @@ -import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; -import '../chart/data_visualization/chart_data.dart'; -import '../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; -import '../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; -import '../chart/data_visualization/models/animation_info.dart'; -import 'interactable_drawing_custom_painter.dart'; - -/// Represents the current state of a drawing tool on the chart. -/// -/// The state determines how the drawing tool is rendered and how it responds -/// to user interactions. Different states trigger different visual appearances -/// and interaction behaviors. -enum DrawingToolState { - /// Default state when the drawing tool is displayed on the chart - /// but not being interacted with. - normal, - - /// The drawing tool is currently selected by the user. Selected tools - /// typically show additional visual cues like handles or a glowy effect - /// to indicate they can be manipulated. - selected, - - /// The user's pointer is hovering over the drawing tool but hasn't - /// selected it yet. This state can be used to provide visual feedback - /// before selection. - hovered, - - /// The drawing tool is in the process of being created/added to the chart. - /// In this state, the tool captures user inputs (like taps) to define - /// its shape and position. - adding, - - /// The drawing tool is being actively moved or resized by the user. - /// This state is active during drag operations when the user is - /// modifying the tool's position. - dragging, -} - -/// The class that will be generated by the drawing tool config instance when -/// they are created or the saved ones that are loaded from storage. -/// The information from this class (its subclasses) will be used to draw the -/// tool on the chart. -/// It will keep the latest state of the drawing tool as the user interacts -/// with the tools in the runtime. -/// During the time that user interacts with a tool. by some debounce mechanism -/// This class will update the config which is supposed to be saved in the storage. -abstract class InteractableDrawing { - /// Initializes [InteractableDrawing]. - InteractableDrawing({required this.config}); - - static const double _hitTestMargin = 32; - - /// The margin for hit testing. - double get hitTestMargin => _hitTestMargin; - - /// The drawing tool config. - final T config; - - /// Returns the updated config. - T getUpdatedConfig(); - - /// Returns `true` if the drawing tool is hit by the given offset. - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); - - /// The tap event that is called when the [InteractableDrawing] is in adding - /// state. - /// - /// the drawing can use the tap to capture and create the coordinates required - /// for its shape. - /// - /// [onDone] is a callback that should be called when the drawing is done. - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) {} - - /// Called when the drawing tool dragging is started. - void onDragStart( - DragStartDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) {} - - /// Called when the drawing tool is dragged and updates the drawing position - /// properties based on the dragging [details]. - /// - /// Each drawing will know how to handle and update itself accordingly based - /// on where the dragging position is like if it's dragging a point or a line - /// of the tool. - void onDragUpdate( - DragUpdateDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ); - - /// Called when the drawing tool dragging is ended. - void onDragEnd( - DragEndDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) {} - - /// Paints the drawing tool on the chart. - void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - GetDrawingState getDrawingState, - ); -} +import '../../chart/data_visualization/chart_data.dart'; +import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; +import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; +import '../../chart/data_visualization/models/animation_info.dart'; +import '../interactable_drawing_custom_painter.dart'; +import 'interactable_drawing.dart'; /// Interactable drawing for line drawing tool. class LineInteractableDrawing @@ -149,12 +33,12 @@ class LineInteractableDrawing @override void onDragStart( - DragStartDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { if (startPoint == null || endPoint == null) { return; } @@ -228,10 +112,10 @@ class LineInteractableDrawing // Calculate perpendicular distance from point to line // Formula: |((y2-y1)x - (x2-x1)y + x2y1 - y2x1)| / sqrt((y2-y1)² + (x2-x1)²) final double distance = ((endOffset.dy - startOffset.dy) * offset.dx - - (endOffset.dx - startOffset.dx) * offset.dy + - endOffset.dx * startOffset.dy - - endOffset.dy * startOffset.dx) - .abs() / + (endOffset.dx - startOffset.dx) * offset.dy + + endOffset.dx * startOffset.dy - + endOffset.dy * startOffset.dx) + .abs() / lineLength; // Check if point is within the line segment (not just the infinite line) @@ -248,21 +132,21 @@ class LineInteractableDrawing @override void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - GetDrawingState getDrawingState, - ) { + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + GetDrawingState getDrawingState, + ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); if (startPoint != null && endPoint != null) { final Offset startOffset = - Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)); + Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)); final Offset endOffset = - Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote)); + Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote)); // Check if this drawing is selected final DrawingToolState state = getDrawingState(this); @@ -304,13 +188,13 @@ class LineInteractableDrawing } void _drawPoint( - EdgePoint point, - EpochToX epochToX, - QuoteToY quoteToY, - Canvas canvas, - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ) { + EdgePoint point, + EpochToX epochToX, + QuoteToY quoteToY, + Canvas canvas, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ) { canvas.drawCircle( Offset(epochToX(point.epoch), quoteToY(point.quote)), 5, @@ -320,13 +204,13 @@ class LineInteractableDrawing @override void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) { + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { if (startPoint == null) { startPoint = EdgePoint( epoch: epochFromX(details.localPosition.dx), @@ -343,12 +227,12 @@ class LineInteractableDrawing @override void onDragUpdate( - DragUpdateDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { if (startPoint == null || endPoint == null) { return; } @@ -360,7 +244,7 @@ class LineInteractableDrawing if (_isDraggingStartPoint != null) { // Get the current point being dragged final EdgePoint pointBeingDragged = - _isDraggingStartPoint! ? startPoint! : endPoint!; + _isDraggingStartPoint! ? startPoint! : endPoint!; // Get the current screen position of the point final Offset currentOffset = Offset( @@ -430,12 +314,12 @@ class LineInteractableDrawing @override void onDragEnd( - DragEndDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { // Reset the dragging flag when drag is complete _isDraggingStartPoint = null; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index e7ba7d7cb..c15252898 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -13,7 +13,7 @@ import '../chart/data_visualization/chart_data.dart'; import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../drawing_tool_chart/drawing_tools.dart'; -import 'interactable_drawing.dart'; +import 'interactable_drawings/interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; import 'interactive_layer_base.dart'; import 'interactive_states/interactive_adding_tool_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 5864cbeea..22924c953 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -1,7 +1,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import '../chart/data_visualization/chart_data.dart'; -import 'interactable_drawing.dart'; +import 'interactable_drawings/interactable_drawing.dart'; import 'interactive_states/interactive_state.dart'; /// The interactive layer base class interface. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index d389aea26..cdeb8c242 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -1,7 +1,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/widgets.dart'; -import '../interactable_drawing.dart'; +import '../interactable_drawings/interactable_drawing.dart'; import 'interactive_normal_state.dart'; import 'interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart index 847dd5831..4be5e33bf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart @@ -1,7 +1,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/gestures.dart'; -import '../interactable_drawing.dart'; +import '../interactable_drawings/interactable_drawing.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is hovered. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index b932ec67f..4ee8b58a3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -2,7 +2,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; -import '../interactable_drawing.dart'; +import '../interactable_drawings/interactable_drawing.dart'; import 'Interactive_hover_state.dart'; import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 2ef08d066..60919a157 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -2,7 +2,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; import 'package:flutter/widgets.dart'; -import '../interactable_drawing.dart'; +import '../interactable_drawings/interactable_drawing.dart'; import 'interactive_normal_state.dart'; import 'interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart index 491c89b0f..36a013dcd 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -2,7 +2,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; import 'package:flutter/gestures.dart'; -import '../interactable_drawing.dart'; +import '../interactable_drawings/interactable_drawing.dart'; import '../interactive_layer_base.dart'; /// The state of the interactive layer. From 5cb344fce2e9a641d2d72153531da2bcef96a2ad Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 5 Mar 2025 18:12:36 +0800 Subject: [PATCH 058/311] show alignment lines when dragging --- .../interactable_drawing_custom_painter.dart | 4 +- .../line_interactable_drawing.dart | 202 +++++++++++++----- .../interactive_adding_tool_state.dart | 6 +- .../interactive_hover_state.dart | 12 +- .../interactive_selected_tool_state.dart | 19 +- .../interactive_states/interactive_state.dart | 4 +- 6 files changed, 178 insertions(+), 69 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 71278cc16..6f5eab389 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -9,7 +9,7 @@ import '../chart/data_visualization/models/animation_info.dart'; import '../chart/y_axis/y_axis_config.dart'; /// A callback which calling it should return if the [drawing] is selected. -typedef GetDrawingState = DrawingToolState Function( +typedef GetDrawingState = Set Function( InteractableDrawing drawing, ); @@ -53,7 +53,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { double Function(double) quoteFromY; /// Returns `true` if the drawing tool is selected. - final DrawingToolState Function(InteractableDrawing) getDrawingState; + final Set Function(InteractableDrawing) getDrawingState; @override void paint(Canvas canvas, Size size) { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 45990c8e2..fc80751a0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,3 +1,4 @@ +import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; @@ -33,12 +34,12 @@ class LineInteractableDrawing @override void onDragStart( - DragStartDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { if (startPoint == null || endPoint == null) { return; } @@ -112,10 +113,10 @@ class LineInteractableDrawing // Calculate perpendicular distance from point to line // Formula: |((y2-y1)x - (x2-x1)y + x2y1 - y2x1)| / sqrt((y2-y1)² + (x2-x1)²) final double distance = ((endOffset.dy - startOffset.dy) * offset.dx - - (endOffset.dx - startOffset.dx) * offset.dy + - endOffset.dx * startOffset.dy - - endOffset.dy * startOffset.dx) - .abs() / + (endOffset.dx - startOffset.dx) * offset.dy + + endOffset.dx * startOffset.dy - + endOffset.dy * startOffset.dx) + .abs() / lineLength; // Check if point is within the line segment (not just the infinite line) @@ -132,35 +133,35 @@ class LineInteractableDrawing @override void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - GetDrawingState getDrawingState, - ) { + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + GetDrawingState getDrawingState, + ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); if (startPoint != null && endPoint != null) { final Offset startOffset = - Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)); + Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)); final Offset endOffset = - Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote)); + Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote)); // Check if this drawing is selected - final DrawingToolState state = getDrawingState(this); + final Set state = getDrawingState(this); // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = state == DrawingToolState.selected + final Paint paint = state.contains(DrawingToolState.selected) ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected - if (state == DrawingToolState.selected || - state == DrawingToolState.hovered) { + if (state.contains(DrawingToolState.selected) || + state.contains(DrawingToolState.hovered)) { const double markerRadius = 5; canvas ..drawCircle( @@ -174,6 +175,11 @@ class LineInteractableDrawing paintStyle.glowyCirclePaintStyle(lineStyle.color), ); } + + // Draw alignment guides when dragging + if (state.contains(DrawingToolState.dragging)) { + _drawAlignmentGuides(canvas, size, startOffset, endOffset, paintStyle); + } } else { if (startPoint != null) { _drawPoint( @@ -187,14 +193,95 @@ class LineInteractableDrawing } } + /// Draws alignment guides (horizontal and vertical lines) from the points + void _drawAlignmentGuides(Canvas canvas, Size size, Offset startOffset, + Offset endOffset, DrawingPaintStyle paintStyle) { + // Create a dashed paint style for the alignment guides + final Paint guidesPaint = Paint() + ..color = const Color(0x80FFFFFF) // Semi-transparent white + ..strokeWidth = 1.0 + ..style = PaintingStyle.stroke; + + // Create a path for dashed lines + final Path horizontalPath1 = Path(); + final Path verticalPath1 = Path(); + final Path horizontalPath2 = Path(); + final Path verticalPath2 = Path(); + + // Draw horizontal and vertical guides from start point + horizontalPath1 + ..moveTo(0, startOffset.dy) + ..lineTo(size.width, startOffset.dy); + + verticalPath1 + ..moveTo(startOffset.dx, 0) + ..lineTo(startOffset.dx, size.height); + + // Draw horizontal and vertical guides from end point + horizontalPath2 + ..moveTo(0, endOffset.dy) + ..lineTo(size.width, endOffset.dy); + + verticalPath2 + ..moveTo(endOffset.dx, 0) + ..lineTo(endOffset.dx, size.height); + + // Draw the dashed lines + canvas + ..drawPath( + _dashPath(horizontalPath1, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ) + ..drawPath( + _dashPath(verticalPath1, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ) + ..drawPath( + _dashPath(horizontalPath2, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ) + ..drawPath( + _dashPath(verticalPath2, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ); + } + + /// Creates a dashed path from a regular path + Path _dashPath( + Path source, { + required _CircularIntervalList dashArray, + }) { + final Path dest = Path(); + for (final ui.PathMetric metric in source.computeMetrics()) { + double distance = 0; + bool draw = true; + while (distance < metric.length) { + final double len = dashArray.next; + if (draw) { + dest.addPath( + metric.extractPath(distance, distance + len), + Offset.zero, + ); + } + distance += len; + draw = !draw; + } + } + return dest; + } + void _drawPoint( - EdgePoint point, - EpochToX epochToX, - QuoteToY quoteToY, - Canvas canvas, - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ) { + EdgePoint point, + EpochToX epochToX, + QuoteToY quoteToY, + Canvas canvas, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ) { canvas.drawCircle( Offset(epochToX(point.epoch), quoteToY(point.quote)), 5, @@ -204,13 +291,13 @@ class LineInteractableDrawing @override void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) { + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { if (startPoint == null) { startPoint = EdgePoint( epoch: epochFromX(details.localPosition.dx), @@ -227,12 +314,12 @@ class LineInteractableDrawing @override void onDragUpdate( - DragUpdateDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { if (startPoint == null || endPoint == null) { return; } @@ -244,7 +331,7 @@ class LineInteractableDrawing if (_isDraggingStartPoint != null) { // Get the current point being dragged final EdgePoint pointBeingDragged = - _isDraggingStartPoint! ? startPoint! : endPoint!; + _isDraggingStartPoint! ? startPoint! : endPoint!; // Get the current screen position of the point final Offset currentOffset = Offset( @@ -314,12 +401,12 @@ class LineInteractableDrawing @override void onDragEnd( - DragEndDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { // Reset the dragging flag when drag is complete _isDraggingStartPoint = null; } @@ -331,3 +418,18 @@ class LineInteractableDrawing if (endPoint != null) endPoint! ]); } + +/// A circular array for dash patterns +class _CircularIntervalList { + _CircularIntervalList(this._values); + + final List _values; + int _index = 0; + + T get next { + if (_index >= _values.length) { + _index = 0; + } + return _values[_index++]; + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index cdeb8c242..fcbf8a8e9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -43,12 +43,12 @@ class InteractiveAddingToolState extends InteractiveState { [if (_addingDrawing != null) _addingDrawing!]; @override - DrawingToolState getToolState( + Set getToolState( InteractableDrawing drawing, ) => drawing.config.configId == addingTool.configId - ? DrawingToolState.adding - : DrawingToolState.normal; + ? {DrawingToolState.adding} + : {DrawingToolState.normal}; @override void onPanEnd(DragEndDetails details) {} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart index 4be5e33bf..2b23c214d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart @@ -12,12 +12,12 @@ mixin InteractiveHoverState on InteractiveState { InteractableDrawing? _hoveredTool; @override - DrawingToolState getToolState( - InteractableDrawing drawing) { - return drawing == _hoveredTool - ? DrawingToolState.hovered - : DrawingToolState.normal; - } + Set getToolState( + InteractableDrawing drawing, + ) => + drawing == _hoveredTool + ? {DrawingToolState.hovered} + : {DrawingToolState.normal}; @override void onHover(PointerHoverEvent event) { diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 60919a157..fd79a2c88 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -37,18 +37,23 @@ class InteractiveSelectedToolState extends InteractiveState bool _draggingStartedOnTool = false; @override - DrawingToolState getToolState( + Set getToolState( InteractableDrawing drawing, ) { - final hoveredDrawing = super.getToolState(drawing); + final Set hoveredState = super.getToolState(drawing); - if (hoveredDrawing == DrawingToolState.hovered) { - return DrawingToolState.hovered; + // If this is the selected drawing + if (drawing.config.configId == selected.config.configId) { + // Return dragging state if we're currently dragging the tool + if (_draggingStartedOnTool) { + return hoveredState..add(DrawingToolState.dragging); + } + // Otherwise return selected state + return hoveredState..add(DrawingToolState.selected); } - return drawing.config.configId == selected.config.configId - ? DrawingToolState.selected - : DrawingToolState.normal; + // For all other drawings, return normal state + return hoveredState; } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart index 36a013dcd..872064bfa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart @@ -30,7 +30,9 @@ abstract class InteractiveState { /// /// This method determines the visual and behavioral state of a specific drawing tool. /// Each concrete state implementation returns different [DrawingToolState] values: - DrawingToolState getToolState(InteractableDrawing drawing); + Set getToolState( + InteractableDrawing drawing, + ); /// Additional drawings of the state to be drawn on top of the main drawings. /// From 892a331db582aed1e30e4cc79cd06badeac2b899 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 00:13:34 +0800 Subject: [PATCH 059/311] show preview line when adding a the tool --- .../interactable_drawing.dart | 10 ++++++++++ .../line_interactable_drawing.dart | 18 ++++++++++++++++++ .../interactive_adding_tool_state.dart | 11 ++++++++++- 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index e0cb5a019..83121058f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; @@ -110,6 +111,15 @@ abstract class InteractableDrawing { QuoteToY quoteToY, ) {} + /// Called when the user's pointer is hovering over the drawing tool. + void onHover( + PointerHoverEvent event, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + /// Paints the drawing tool on the chart. void paint( Canvas canvas, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index fc80751a0..d8cfcf6e7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,6 +1,7 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; @@ -32,6 +33,14 @@ class LineInteractableDrawing // false: dragging the end point bool? _isDraggingStartPoint; + Offset? _hoverPosition; + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + @override void onDragStart( DragStartDetails details, @@ -184,6 +193,15 @@ class LineInteractableDrawing if (startPoint != null) { _drawPoint( startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); + + if (endPoint == null && _hoverPosition != null) { + final Offset hoverOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + canvas.drawLine(hoverOffset, _hoverPosition!, + paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); + } } if (endPoint != null) { diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index fcbf8a8e9..3c02b3099 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -1,5 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:flutter/widgets.dart'; +import 'package:flutter/gestures.dart'; import '../interactable_drawings/interactable_drawing.dart'; import 'interactive_normal_state.dart'; @@ -59,6 +59,15 @@ class InteractiveAddingToolState extends InteractiveState { @override void onPanUpdate(DragUpdateDetails details) {} + @override + void onHover(PointerHoverEvent event) => _addingDrawing?.onHover( + event, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); + @override void onTap(TapUpDetails details) { _addingDrawing ??= addingTool.getInteractableDrawing(); From 79374dbec1b4a95f8d9a62d18cd84056b9af48a7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 06:15:10 +0800 Subject: [PATCH 060/311] WIP adding state change animation --- .../models/animation_info.dart | 8 +- .../interactable_drawing_custom_painter.dart | 6 +- .../line_interactable_drawing.dart | 6 +- .../interactive_layer/interactive_layer.dart | 106 +++++++++++------- 4 files changed, 83 insertions(+), 43 deletions(-) diff --git a/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart b/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart index a6f4071db..5b9fd5ff7 100644 --- a/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart +++ b/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart @@ -1,11 +1,17 @@ /// A class that hold animation progress values. class AnimationInfo { /// Initializes - const AnimationInfo({this.currentTickPercent = 1, this.blinkingPercent = 1}); + const AnimationInfo({ + this.currentTickPercent = 1, + this.blinkingPercent = 1, + this.stateChangePercent = 1, + }); /// Animation percent of current tick. final double currentTickPercent; /// Animation percent of blinking dot in current tick. final double blinkingPercent; + + final double stateChangePercent; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 6f5eab389..61e8c694b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -26,6 +26,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { required this.quoteToY, required this.quoteFromY, required this.getDrawingState, + this.animationInfo = const AnimationInfo(), }); /// Drawing to paint. @@ -52,6 +53,9 @@ class InteractableDrawingCustomPainter extends CustomPainter { /// Converts quote value to y coordinate (in pixels). double Function(double) quoteFromY; + /// Showing animations progress. + final AnimationInfo animationInfo; + /// Returns `true` if the drawing tool is selected. final Set Function(InteractableDrawing) getDrawingState; @@ -63,7 +67,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { size, epochToX, quoteToY, - const AnimationInfo(), + animationInfo, getDrawingState, ); // TODO(NA): Paint the [drawing] diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index d8cfcf6e7..c355c9c0a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,5 +1,6 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/markers/animated_active_marker.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -163,7 +164,8 @@ class LineInteractableDrawing // Use glowy paint style if selected, otherwise use normal paint style final Paint paint = state.contains(DrawingToolState.selected) - ? paintStyle.glowyLinePaintStyle(lineStyle.color, lineStyle.thickness) + ? paintStyle.linePaintStyle( + lineStyle.color, 1 + 5 * animationInfo.stateChangePercent) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); canvas.drawLine(startOffset, endOffset, paint); @@ -171,7 +173,7 @@ class LineInteractableDrawing // Draw endpoints with glowy effect if selected if (state.contains(DrawingToolState.selected) || state.contains(DrawingToolState.hovered)) { - const double markerRadius = 5; + final double markerRadius = 5 * animationInfo.stateChangePercent; canvas ..drawCircle( startOffset, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index c15252898..b41cd0554 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -1,5 +1,6 @@ import 'dart:async'; +import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; @@ -210,10 +211,13 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { class _InteractiveLayerGestureHandlerState extends State<_InteractiveLayerGestureHandler> + with SingleTickerProviderStateMixin implements InteractiveLayerBase { // InteractableDrawing? _selectedDrawing; late InteractiveState _interactiveState; + late AnimationController _stateChangeController; + static const Curve _stateChangeCurve = Curves.easeInOut; @override void initState() { @@ -221,6 +225,11 @@ class _InteractiveLayerGestureHandlerState _interactiveState = InteractiveNormalState(interactiveLayer: this); + _stateChangeController = AnimationController( + vsync: this, + duration: const Duration(milliseconds: 300), + ); + // register the callback context.read().registerCallback(onTap); } @@ -241,8 +250,13 @@ class _InteractiveLayerGestureHandlerState } @override - void updateStateTo(InteractiveState state) => - setState(() => _interactiveState = state); + void updateStateTo(InteractiveState state) { + _stateChangeController + ..reset() + ..forward(); + _interactiveState = state; + // setState(() => _interactiveState = state); + } @override Widget build(BuildContext context) { @@ -257,43 +271,57 @@ class _InteractiveLayerGestureHandlerState onPanEnd: (details) => _interactiveState.onPanEnd(details), // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. - child: Stack( - fit: StackFit.expand, - children: [ - ...widget.drawings - .map((e) => CustomPaint( - foregroundPainter: InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - getDrawingState: _interactiveState.getToolState, - // onDrawingToolClicked: () => _selectedDrawing = e, - ), - )) - .toList(), - ..._interactiveState.previewDrawings - .map((e) => CustomPaint( - foregroundPainter: InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - getDrawingState: _interactiveState.getToolState, - // onDrawingToolClicked: () => _selectedDrawing = e, - ), - )) - .toList(), - ], - ), + child: AnimatedBuilder( + animation: _stateChangeController, + builder: (_, __) { + final double animationValue = + _stateChangeCurve.transform(_stateChangeController.value); + print('##### $animationValue'); + + return Stack( + fit: StackFit.expand, + children: [ + ...widget.drawings + .map((e) => CustomPaint( + foregroundPainter: InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: + _interactiveState.getToolState, + animationInfo: AnimationInfo( + stateChangePercent: animationValue) + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), + ..._interactiveState.previewDrawings + .map((e) => CustomPaint( + foregroundPainter: InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: + _interactiveState.getToolState, + animationInfo: AnimationInfo( + stateChangePercent: animationValue) + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), + ], + ); + }), ), ), ); From ca27f82efc44cd96c9707079232674293aff079d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 06:36:52 +0800 Subject: [PATCH 061/311] add direciton to state change animation --- .../interactive_layer/interactive_layer.dart | 30 +++++++++++++++---- .../interactive_layer_base.dart | 7 ++++- .../interactive_adding_tool_state.dart | 2 ++ .../interactive_normal_state.dart | 4 ++- .../interactive_selected_tool_state.dart | 5 ++++ .../state_change_direction.dart | 1 + 6 files changed, 41 insertions(+), 8 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/state_change_direction.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index b41cd0554..97fbd5ef1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -20,6 +20,7 @@ import 'interactive_layer_base.dart'; import 'interactive_states/interactive_adding_tool_state.dart'; import 'interactive_states/interactive_normal_state.dart'; import 'interactive_states/interactive_state.dart'; +import 'state_change_direction.dart'; // ignore_for_file: public_member_api_docs /// Interactive layer of the chart package where elements can be drawn and can @@ -245,17 +246,34 @@ class _InteractiveLayerGestureHandlerState widget.addingDrawingTool!, interactiveLayer: this, ), + StateChangeDirection.forward, ); } } @override - void updateStateTo(InteractiveState state) { - _stateChangeController - ..reset() - ..forward(); - _interactiveState = state; - // setState(() => _interactiveState = state); + Future updateStateTo( + InteractiveState state, + StateChangeDirection direction, { + bool blocking = false, + }) async { + if (blocking) { + if (direction == StateChangeDirection.forward) { + _stateChangeController.reset(); + await _stateChangeController.forward(); + } else { + await _stateChangeController.reverse(from: 1); + } + setState(() => _interactiveState = state); + } else { + if (direction == StateChangeDirection.forward) { + _stateChangeController.reset(); + unawaited(_stateChangeController.forward()); + } else { + unawaited(_stateChangeController.reverse(from: 1)); + } + _interactiveState = state; + } } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 22924c953..b1a4756e3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -3,11 +3,16 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import '../chart/data_visualization/chart_data.dart'; import 'interactable_drawings/interactable_drawing.dart'; import 'interactive_states/interactive_state.dart'; +import 'state_change_direction.dart'; /// The interactive layer base class interface. abstract class InteractiveLayerBase { /// Updates the state of the interactive layer to the [state]. - void updateStateTo(InteractiveState state); + void updateStateTo( + InteractiveState state, + StateChangeDirection direction, { + bool blocking = false, + }); /// The drawings of the interactive layer. List> get drawings; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index 3c02b3099..faefdc12a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/gestures.dart'; import '../interactable_drawings/interactable_drawing.dart'; @@ -79,6 +80,7 @@ class InteractiveAddingToolState extends InteractiveState { ..onAddDrawing(_addingDrawing!) ..updateStateTo( InteractiveNormalState(interactiveLayer: interactiveLayer), + StateChangeDirection.forward, ); }); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index 4ee8b58a3..f2a2e802b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -40,7 +41,7 @@ class InteractiveNormalState extends InteractiveState interactiveLayer: interactiveLayer, ); - interactiveLayer.updateStateTo(newState); + interactiveLayer.updateStateTo(newState, StateChangeDirection.forward); newState.onPanStart(details); } @@ -63,6 +64,7 @@ class InteractiveNormalState extends InteractiveState selected: hitDrawing, interactiveLayer: interactiveLayer, ), + StateChangeDirection.forward, ); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index fd79a2c88..0b53574aa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawings/interactable_drawing.dart'; @@ -80,6 +81,7 @@ class InteractiveSelectedToolState extends InteractiveState selected: hitDrawing, interactiveLayer: interactiveLayer, )..onPanStart(details), + StateChangeDirection.forward, ); } } @@ -113,11 +115,14 @@ class InteractiveSelectedToolState extends InteractiveState selected: hitDrawing, interactiveLayer: interactiveLayer, ), + StateChangeDirection.forward, ); } else { // If tap is on empty space, return to normal state. interactiveLayer.updateStateTo( InteractiveNormalState(interactiveLayer: interactiveLayer), + StateChangeDirection.backward, + blocking: true, ); } } diff --git a/lib/src/deriv_chart/interactive_layer/state_change_direction.dart b/lib/src/deriv_chart/interactive_layer/state_change_direction.dart new file mode 100644 index 000000000..ce905cb60 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/state_change_direction.dart @@ -0,0 +1 @@ +enum StateChangeDirection { forward, backward } From 9ccfebbcd2b5883baf283ab4979d52e6163ecfd8 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 07:53:55 +0800 Subject: [PATCH 062/311] code cleanup --- .../interactable_drawings/line_interactable_drawing.dart | 9 +++++---- .../deriv_chart/interactive_layer/interactive_layer.dart | 9 ++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index c355c9c0a..3fcc936f4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,6 +1,5 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/markers/animated_active_marker.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -163,16 +162,18 @@ class LineInteractableDrawing final Set state = getDrawingState(this); // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = state.contains(DrawingToolState.selected) + final Paint paint = state.contains(DrawingToolState.selected) || + state.contains(DrawingToolState.dragging) ? paintStyle.linePaintStyle( - lineStyle.color, 1 + 5 * animationInfo.stateChangePercent) + lineStyle.color, 1 + 3 * animationInfo.stateChangePercent) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected if (state.contains(DrawingToolState.selected) || - state.contains(DrawingToolState.hovered)) { + state.contains(DrawingToolState.hovered) || + state.contains(DrawingToolState.dragging)) { final double markerRadius = 5 * animationInfo.stateChangePercent; canvas ..drawCircle( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 97fbd5ef1..7b103a8e1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -1,6 +1,5 @@ import 'dart:async'; -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; @@ -13,6 +12,7 @@ import 'package:provider/provider.dart'; import '../chart/data_visualization/chart_data.dart'; import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; +import '../chart/data_visualization/models/animation_info.dart'; import '../drawing_tool_chart/drawing_tools.dart'; import 'interactable_drawings/interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; @@ -294,7 +294,6 @@ class _InteractiveLayerGestureHandlerState builder: (_, __) { final double animationValue = _stateChangeCurve.transform(_stateChangeController.value); - print('##### $animationValue'); return Stack( fit: StackFit.expand, @@ -310,10 +309,10 @@ class _InteractiveLayerGestureHandlerState epochToX: xAxis.xFromEpoch, quoteToY: widget.quoteToY, quoteFromY: widget.quoteFromY, - getDrawingState: - _interactiveState.getToolState, + getDrawingState: _interactiveState.getToolState, animationInfo: AnimationInfo( - stateChangePercent: animationValue) + stateChangePercent: animationValue, + ) // onDrawingToolClicked: () => _selectedDrawing = e, ), )) From c6378d32a38766417f241b6330383dede2421fcc Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 08:15:29 +0800 Subject: [PATCH 063/311] improve line selection effect --- .../line_interactable_drawing.dart | 61 ++++++++++++++----- 1 file changed, 47 insertions(+), 14 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 3fcc936f4..19bed2063 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -165,27 +165,26 @@ class LineInteractableDrawing final Paint paint = state.contains(DrawingToolState.selected) || state.contains(DrawingToolState.dragging) ? paintStyle.linePaintStyle( - lineStyle.color, 1 + 3 * animationInfo.stateChangePercent) + lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected if (state.contains(DrawingToolState.selected) || - state.contains(DrawingToolState.hovered) || state.contains(DrawingToolState.dragging)) { - final double markerRadius = 5 * animationInfo.stateChangePercent; - canvas - ..drawCircle( - startOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ) - ..drawCircle( - endOffset, - markerRadius, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); + _drawPointsFocusedCircle( + paintStyle, + lineStyle, + canvas, + startOffset, + 10 * animationInfo.stateChangePercent, + 3 * animationInfo.stateChangePercent, + endOffset, + ); + } else if (state.contains(DrawingToolState.hovered)) { + _drawPointsFocusedCircle( + paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); } // Draw alignment guides when dragging @@ -214,6 +213,40 @@ class LineInteractableDrawing } } + void _drawPointsFocusedCircle( + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ui.Canvas canvas, + ui.Offset startOffset, + double outerCircleRadius, + double innerCircleRadius, + ui.Offset endOffset) { + final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); + final glowyPaintStyle = + paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); + canvas + ..drawCircle( + startOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + startOffset, + innerCircleRadius, + normalPaintStyle, + ) + ..drawCircle( + endOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + endOffset, + innerCircleRadius, + normalPaintStyle, + ); + } + /// Draws alignment guides (horizontal and vertical lines) from the points void _drawAlignmentGuides(Canvas canvas, Size size, Offset startOffset, Offset endOffset, DrawingPaintStyle paintStyle) { From fa5dee7a2c31c2717d23b95eeb36d83cc3257790 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 08:34:51 +0800 Subject: [PATCH 064/311] code cleanup :recycle: --- .../line_interactable_drawing.dart | 61 ++++++++----------- 1 file changed, 25 insertions(+), 36 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 19bed2063..6c46e0f33 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -178,7 +178,7 @@ class LineInteractableDrawing lineStyle, canvas, startOffset, - 10 * animationInfo.stateChangePercent, + 10 * animationInfo.stateChangePercent, 3 * animationInfo.stateChangePercent, endOffset, ); @@ -197,12 +197,15 @@ class LineInteractableDrawing startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); if (endPoint == null && _hoverPosition != null) { - final Offset hoverOffset = Offset( + // endPoint doesn't exist yet and it means we're creating this line. + // Drawing preview line from startPoint to hoverPosition. + final Offset startPosition = Offset( epochToX(startPoint!.epoch), quoteToY(startPoint!.quote), ); - canvas.drawLine(hoverOffset, _hoverPosition!, + canvas.drawLine(startPosition, _hoverPosition!, paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); + _drawPointAlignmentGuides(canvas, size, _hoverPosition!); } } @@ -250,55 +253,41 @@ class LineInteractableDrawing /// Draws alignment guides (horizontal and vertical lines) from the points void _drawAlignmentGuides(Canvas canvas, Size size, Offset startOffset, Offset endOffset, DrawingPaintStyle paintStyle) { + // Draw alignment guides for both start and end points + _drawPointAlignmentGuides(canvas, size, startOffset); + _drawPointAlignmentGuides(canvas, size, endOffset); + } + + /// Draws alignment guides (horizontal and vertical lines) for a single point + void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { // Create a dashed paint style for the alignment guides final Paint guidesPaint = Paint() ..color = const Color(0x80FFFFFF) // Semi-transparent white ..strokeWidth = 1.0 ..style = PaintingStyle.stroke; - // Create a path for dashed lines - final Path horizontalPath1 = Path(); - final Path verticalPath1 = Path(); - final Path horizontalPath2 = Path(); - final Path verticalPath2 = Path(); - - // Draw horizontal and vertical guides from start point - horizontalPath1 - ..moveTo(0, startOffset.dy) - ..lineTo(size.width, startOffset.dy); + // Create paths for horizontal and vertical guides + final Path horizontalPath = Path(); + final Path verticalPath = Path(); - verticalPath1 - ..moveTo(startOffset.dx, 0) - ..lineTo(startOffset.dx, size.height); + // Draw horizontal and vertical guides from the point + horizontalPath + ..moveTo(0, pointOffset.dy) + ..lineTo(size.width, pointOffset.dy); - // Draw horizontal and vertical guides from end point - horizontalPath2 - ..moveTo(0, endOffset.dy) - ..lineTo(size.width, endOffset.dy); - - verticalPath2 - ..moveTo(endOffset.dx, 0) - ..lineTo(endOffset.dx, size.height); + verticalPath + ..moveTo(pointOffset.dx, 0) + ..lineTo(pointOffset.dx, size.height); // Draw the dashed lines canvas ..drawPath( - _dashPath(horizontalPath1, - dashArray: _CircularIntervalList([5, 5])), - guidesPaint, - ) - ..drawPath( - _dashPath(verticalPath1, - dashArray: _CircularIntervalList([5, 5])), - guidesPaint, - ) - ..drawPath( - _dashPath(horizontalPath2, + _dashPath(horizontalPath, dashArray: _CircularIntervalList([5, 5])), guidesPaint, ) ..drawPath( - _dashPath(verticalPath2, + _dashPath(verticalPath, dashArray: _CircularIntervalList([5, 5])), guidesPaint, ); From 20f06773c1a8781cf01e80dd361723c6ca55a265 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 10:42:33 +0800 Subject: [PATCH 065/311] code cleanup :recycle: --- .../interactable_drawings/line_interactable_drawing.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 6c46e0f33..fe47b8f9f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -178,7 +178,7 @@ class LineInteractableDrawing lineStyle, canvas, startOffset, - 10 * animationInfo.stateChangePercent, + 10 * animationInfo.stateChangePercent, 3 * animationInfo.stateChangePercent, endOffset, ); From 036fc2f3f66fe9bf5c80b7a6bfed04b33a15572e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 11:38:01 +0800 Subject: [PATCH 066/311] adding horizontal line --- .../horizontal_drawing_tool_config.dart | 12 + .../horizontal_line_interactable_drawing.dart | 350 ++++++++++++++++++ .../interactive_layer/interactive_layer.dart | 6 +- .../interactive_adding_tool_state.dart | 9 +- 4 files changed, 374 insertions(+), 3 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index c4f3edd22..de5c8fa3e 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -4,6 +4,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.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/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; @@ -81,4 +82,15 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { enableLabel: enableLabel ?? this.enableLabel, number: number ?? this.number, ); + + @override + HorizontalLineInteractableDrawing getInteractableDrawing() { + final EdgePoint? startPoint = + edgePoints.isNotEmpty ? edgePoints.first : null; + + return HorizontalLineInteractableDrawing( + config: this, + startPoint: startPoint, + ); + } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart new file mode 100644 index 000000000..44cbc5088 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -0,0 +1,350 @@ +import 'dart:ui' as ui; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; +import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/gestures.dart'; +import 'package:flutter/widgets.dart'; + +import '../../chart/data_visualization/chart_data.dart'; +import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; +import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; +import '../../chart/data_visualization/models/animation_info.dart'; +import '../interactable_drawing_custom_painter.dart'; +import 'interactable_drawing.dart'; + +/// Interactable drawing for horizontal line drawing tool. +class HorizontalLineInteractableDrawing + extends InteractableDrawing { + /// Initializes [HorizontalLineInteractableDrawing]. + HorizontalLineInteractableDrawing({ + required HorizontalDrawingToolConfig config, + required this.startPoint, + }) : super(config: config); + + /// Start point of the line. + EdgePoint? startPoint; + + Offset? _hoverPosition; + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + + @override + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (startPoint == null) { + return; + } + + // Convert start and end points from epoch/quote to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + // For horizontal line, we only need to check if the drag is near the line + final double distance = (details.localPosition.dy - startOffset.dy).abs(); + if (distance > hitTestMargin) { + return; + } + } + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (startPoint == null) { + return false; + } + + // Convert start and end points from epoch/quote to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + // For horizontal line, we only need to check if the point is near the line's y-coordinate + final double distance = (offset.dy - startOffset.dy).abs(); + return distance <= hitTestMargin; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + GetDrawingState getDrawingState, + ) { + final LineStyle lineStyle = config.lineStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + + if (startPoint != null) { + final Offset startOffset = + Offset(0, quoteToY(startPoint!.quote)); // Start from left edge + final Offset endOffset = + Offset(size.width, quoteToY(startPoint!.quote)); // End at right edge + + // Check if this drawing is selected + final Set state = getDrawingState(this); + + // Use glowy paint style if selected, otherwise use normal paint style + final Paint paint = state.contains(DrawingToolState.selected) || + state.contains(DrawingToolState.dragging) + ? paintStyle.linePaintStyle( + lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) + : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); + + canvas.drawLine(startOffset, endOffset, paint); + + // Draw endpoints with glowy effect if selected + if (state.contains(DrawingToolState.selected) || + state.contains(DrawingToolState.dragging)) { + _drawPointsFocusedCircle( + paintStyle, + lineStyle, + canvas, + startOffset, + 10 * animationInfo.stateChangePercent, + 3 * animationInfo.stateChangePercent, + endOffset, + ); + } else if (state.contains(DrawingToolState.hovered)) { + _drawPointsFocusedCircle( + paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); + } + + // Draw alignment guides when dragging + if (state.contains(DrawingToolState.dragging)) { + _drawAlignmentGuides(canvas, size, startOffset); + } + } else { + if (startPoint != null) { + _drawPoint( + startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); + + if (startPoint == null && _hoverPosition != null) { + // endPoint doesn't exist yet and it means we're creating this line. + // Drawing preview horizontal line from startPoint's y-coordinate + final Offset startPosition = Offset( + 0, + _hoverPosition!.dy, + ); + final Offset endPosition = Offset( + size.width, + _hoverPosition!.dy, + ); + canvas.drawLine(startPosition, endPosition, + paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); + _drawPointAlignmentGuides(canvas, size, startPosition); + } + } + } + } + + void _drawPointsFocusedCircle( + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ui.Canvas canvas, + ui.Offset startOffset, + double outerCircleRadius, + double innerCircleRadius, + ui.Offset endOffset) { + final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); + final glowyPaintStyle = + paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); + canvas + ..drawCircle( + startOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + startOffset, + innerCircleRadius, + normalPaintStyle, + ) + ..drawCircle( + endOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + endOffset, + innerCircleRadius, + normalPaintStyle, + ); + } + + /// Draws alignment guides (horizontal lines) for the point + void _drawAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { + // Create a dashed paint style for the alignment guides + final Paint guidesPaint = Paint() + ..color = const Color(0x80FFFFFF) // Semi-transparent white + ..strokeWidth = 1.0 + ..style = PaintingStyle.stroke; + + // Create path for horizontal guide + final Path horizontalPath = Path(); + + // Draw horizontal guide from the point + horizontalPath + ..moveTo(0, pointOffset.dy) + ..lineTo(size.width, pointOffset.dy); + + // Draw the dashed line + canvas.drawPath( + _dashPath(horizontalPath, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ); + } + + /// Creates a dashed path from a regular path + Path _dashPath( + Path source, { + required _CircularIntervalList dashArray, + }) { + final Path dest = Path(); + for (final ui.PathMetric metric in source.computeMetrics()) { + double distance = 0; + bool draw = true; + while (distance < metric.length) { + final double len = dashArray.next; + if (draw) { + dest.addPath( + metric.extractPath(distance, distance + len), + Offset.zero, + ); + } + distance += len; + draw = !draw; + } + } + return dest; + } + + void _drawPoint( + EdgePoint point, + EpochToX epochToX, + QuoteToY quoteToY, + Canvas canvas, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ) { + canvas.drawCircle( + Offset(epochToX(point.epoch), quoteToY(point.quote)), + 5, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); + } + + void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { + // Create a dashed paint style for the alignment guides + final Paint guidesPaint = Paint() + ..color = const Color(0x80FFFFFF) // Semi-transparent white + ..strokeWidth = 1.0 + ..style = PaintingStyle.stroke; + + // Create path for horizontal guide + final Path horizontalPath = Path(); + + // Draw horizontal guide from the point + horizontalPath + ..moveTo(0, pointOffset.dy) + ..lineTo(size.width, pointOffset.dy); + + // Draw the dashed line + canvas.drawPath( + _dashPath(horizontalPath, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ); + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + if (startPoint == null) { + final quote = quoteFromY(details.localPosition.dy); + startPoint = EdgePoint( + epoch: epochFromX(0), // Start from left edge + quote: quote, + ); + onDone(); // Complete immediately since we don't need a second tap + } + } + + @override + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (startPoint == null) { + return; + } + + // Get the drag delta in screen coordinates + final double deltaY = details.delta.dy; + + // Get the current screen position + final double currentY = quoteToY(startPoint!.quote); + + // Apply the delta to get the new screen position + final double newY = currentY + deltaY; + + // Convert back to quote coordinate + final double newQuote = quoteFromY(newY); + + // Update both points to maintain horizontal line + startPoint = EdgePoint( + epoch: startPoint!.epoch, + quote: newQuote, + ); + } + + @override + void onDragEnd( + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + // No special handling needed for drag end + } + + @override + HorizontalDrawingToolConfig getUpdatedConfig() => config + .copyWith(edgePoints: [if (startPoint != null) startPoint!]); +} + +/// A circular array for dash patterns +class _CircularIntervalList { + _CircularIntervalList(this._values); + + final List _values; + int _index = 0; + + T get next { + if (_index >= _values.length) { + _index = 0; + } + return _values[_index++]; + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 7b103a8e1..a754fce10 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -281,7 +281,11 @@ class _InteractiveLayerGestureHandlerState final XAxisModel xAxis = context.watch(); return Semantics( child: MouseRegion( - onHover: (event) => _interactiveState.onHover(event), + onHover: (event) { + print( + 'InteractiveLayerOnHover $event ${_interactiveState.runtimeType} ${_interactiveState}'); + _interactiveState.onHover(event); + }, child: GestureDetector( onTapUp: (details) => _interactiveState.onTap(details), onPanStart: (details) => _interactiveState.onPanStart(details), diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index faefdc12a..e41d4d70e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/gestures.dart'; @@ -14,7 +15,8 @@ import 'interactive_state.dart'; /// /// After the drawing is created, the interactive layer transitions back to the /// [InteractiveNormalState]. -class InteractiveAddingToolState extends InteractiveState { +class InteractiveAddingToolState extends InteractiveState + with InteractiveHoverState { /// Initializes the state with the interactive layer and the [addingTool]. /// /// The [addingTool] parameter specifies the configuration for the type of drawing @@ -61,13 +63,16 @@ class InteractiveAddingToolState extends InteractiveState { void onPanUpdate(DragUpdateDetails details) {} @override - void onHover(PointerHoverEvent event) => _addingDrawing?.onHover( + void onHover(PointerHoverEvent event) { + print('##### Adding state hover $event'); + _addingDrawing?.onHover( event, epochFromX, quoteFromY, epochToX, quoteToY, ); + } @override void onTap(TapUpDetails details) { From bc805c7808882b28bac4a62d18361938cccda138 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 12:14:36 +0800 Subject: [PATCH 067/311] show preview line on horizontal drawing --- lib/src/add_ons/add_ons_repository.dart | 6 ++++ .../drawing_tools_dialog.dart | 1 + lib/src/add_ons/repository.dart | 2 ++ .../horizontal_line_interactable_drawing.dart | 33 ++++++++----------- .../interactive_layer/interactive_layer.dart | 2 -- .../interactive_adding_tool_state.dart | 19 +++++------ 6 files changed, 32 insertions(+), 31 deletions(-) diff --git a/lib/src/add_ons/add_ons_repository.dart b/lib/src/add_ons/add_ons_repository.dart index ee2c40b5b..33596455a 100644 --- a/lib/src/add_ons/add_ons_repository.dart +++ b/lib/src/add_ons/add_ons_repository.dart @@ -29,6 +29,7 @@ class AddOnsRepository extends ChangeNotifier /// List containing addOns final List _addOns; + // TODO(Ramin): once we handle setting [AddOnConfig.number] inside this class // we can use [runtimeType + number] as the id for config objects and can // change this to Map to store hidden status. @@ -153,4 +154,9 @@ class AddOnsRepository extends ChangeNotifier @override bool getHiddenStatus(int index) => _hiddenStatus[index]; + + @override + void update() { + notifyListeners(); + } } diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart index 5e76ef902..a0fbc8d73 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart @@ -99,6 +99,7 @@ class _DrawingToolsDialogState extends State { ? () { widget.drawingTools .onDrawingToolSelection(_selectedDrawingTool!); + repo.update(); Navigator.of(context).pop(); } : null, diff --git a/lib/src/add_ons/repository.dart b/lib/src/add_ons/repository.dart index 655ee2cb3..1e749fbaa 100644 --- a/lib/src/add_ons/repository.dart +++ b/lib/src/add_ons/repository.dart @@ -34,4 +34,6 @@ abstract class Repository extends ChangeNotifier { /// Retrieves the hidden status of an indicator or drawing tool. bool getHiddenStatus(int index); + + void update() {} } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 44cbc5088..e9e4d642b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -125,25 +125,20 @@ class HorizontalLineInteractableDrawing _drawAlignmentGuides(canvas, size, startOffset); } } else { - if (startPoint != null) { - _drawPoint( - startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - - if (startPoint == null && _hoverPosition != null) { - // endPoint doesn't exist yet and it means we're creating this line. - // Drawing preview horizontal line from startPoint's y-coordinate - final Offset startPosition = Offset( - 0, - _hoverPosition!.dy, - ); - final Offset endPosition = Offset( - size.width, - _hoverPosition!.dy, - ); - canvas.drawLine(startPosition, endPosition, - paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); - _drawPointAlignmentGuides(canvas, size, startPosition); - } + if (startPoint == null && _hoverPosition != null) { + // endPoint doesn't exist yet and it means we're creating this line. + // Drawing preview horizontal line from startPoint's y-coordinate + final Offset startPosition = Offset( + 0, + _hoverPosition!.dy, + ); + final Offset endPosition = Offset( + size.width, + _hoverPosition!.dy, + ); + canvas.drawLine(startPosition, endPosition, + paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); + _drawPointAlignmentGuides(canvas, size, startPosition); } } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index a754fce10..7e9394473 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -282,8 +282,6 @@ class _InteractiveLayerGestureHandlerState return Semantics( child: MouseRegion( onHover: (event) { - print( - 'InteractiveLayerOnHover $event ${_interactiveState.runtimeType} ${_interactiveState}'); _interactiveState.onHover(event); }, child: GestureDetector( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index e41d4d70e..31000543d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -27,7 +27,9 @@ class InteractiveAddingToolState extends InteractiveState InteractiveAddingToolState( this.addingTool, { required super.interactiveLayer, - }); + }) { + _addingDrawing ??= addingTool.getInteractableDrawing(); + } /// The tool being added. /// @@ -64,20 +66,17 @@ class InteractiveAddingToolState extends InteractiveState @override void onHover(PointerHoverEvent event) { - print('##### Adding state hover $event'); _addingDrawing?.onHover( - event, - epochFromX, - quoteFromY, - epochToX, - quoteToY, - ); + event, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); } @override void onTap(TapUpDetails details) { - _addingDrawing ??= addingTool.getInteractableDrawing(); - _addingDrawing! .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { interactiveLayer From e482a7a6052f89b544e45bf05373934eaf03f2f6 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 15:19:19 +0800 Subject: [PATCH 068/311] keep the newly added drawing as selected when adding is done --- .../line_interactable_drawing.dart | 18 ++++++++----- .../interactive_layer/interactive_layer.dart | 26 ++++++++++++------- .../interactive_layer_base.dart | 3 ++- .../interactive_adding_tool_state.dart | 25 +++++++++++++----- 4 files changed, 48 insertions(+), 24 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index fe47b8f9f..5e6629e99 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -151,6 +151,8 @@ class LineInteractableDrawing ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + // Check if this drawing is selected + final Set state = getDrawingState(this); if (startPoint != null && endPoint != null) { final Offset startOffset = @@ -158,9 +160,6 @@ class LineInteractableDrawing final Offset endOffset = Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote)); - // Check if this drawing is selected - final Set state = getDrawingState(this); - // Use glowy paint style if selected, otherwise use normal paint style final Paint paint = state.contains(DrawingToolState.selected) || state.contains(DrawingToolState.dragging) @@ -191,12 +190,19 @@ class LineInteractableDrawing if (state.contains(DrawingToolState.dragging)) { _drawAlignmentGuides(canvas, size, startOffset, endOffset, paintStyle); } - } else { + } else if (state.contains(DrawingToolState.adding)) { if (startPoint != null) { _drawPoint( startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - - if (endPoint == null && _hoverPosition != null) { + _drawPointAlignmentGuides( + canvas, + size, + Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote) + )); + + if (_hoverPosition != null) { // endPoint doesn't exist yet and it means we're creating this line. // Drawing preview line from startPoint to hoverPosition. final Offset startPosition = Offset( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 7e9394473..f758eb0e9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -135,12 +135,16 @@ class _InteractiveLayerState extends State { }); } - void _addDrawingToRepo(InteractableDrawing drawing) => - widget.drawingToolsRepo.add( - drawing.getUpdatedConfig().copyWith( - configId: DateTime.now().millisecondsSinceEpoch.toString(), - ), - ); + DrawingToolConfig _addDrawingToRepo( + InteractableDrawing drawing) { + final config = drawing + .getUpdatedConfig() + .copyWith(configId: DateTime.now().millisecondsSinceEpoch.toString()); + + widget.drawingToolsRepo.add(config); + + return config; + } @override void dispose() { @@ -179,15 +183,16 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { required this.series, required this.chartConfig, required this.onClearAddingDrawingTool, + required this.onAddDrawing, this.addingDrawingTool, this.onSaveDrawingChange, - this.onAddDrawing, }); final List drawings; final Function(InteractableDrawing)? onSaveDrawingChange; - final Function(InteractableDrawing)? onAddDrawing; + final DrawingToolConfig Function(InteractableDrawing) + onAddDrawing; final DrawingToolConfig? addingDrawingTool; @@ -369,8 +374,9 @@ class _InteractiveLayerGestureHandlerState void clearAddingDrawing() => widget.onClearAddingDrawingTool.call(); @override - void onAddDrawing(InteractableDrawing drawing) => - widget.onAddDrawing?.call(drawing); + DrawingToolConfig onAddDrawing( + InteractableDrawing drawing) => + widget.onAddDrawing.call(drawing); @override void onSaveDrawing(InteractableDrawing drawing) => diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index b1a4756e3..d26e35b73 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -33,7 +33,8 @@ abstract class InteractiveLayerBase { void clearAddingDrawing(); /// Adds the [drawing] to the interactive layer. - void onAddDrawing(InteractableDrawing drawing); + DrawingToolConfig onAddDrawing( + InteractableDrawing drawing); /// Save the drawings with the latest changes (positions or anything) to the /// repository. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index 31000543d..be04eea5c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/gestures.dart'; @@ -79,13 +80,23 @@ class InteractiveAddingToolState extends InteractiveState void onTap(TapUpDetails details) { _addingDrawing! .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { - interactiveLayer - ..clearAddingDrawing() - ..onAddDrawing(_addingDrawing!) - ..updateStateTo( - InteractiveNormalState(interactiveLayer: interactiveLayer), - StateChangeDirection.forward, - ); + interactiveLayer.clearAddingDrawing(); + + final DrawingToolConfig addedConfig = + interactiveLayer.onAddDrawing(_addingDrawing!); + + for (final drawing in interactiveLayer.drawings) { + if (drawing.config.configId == addedConfig.configId) { + interactiveLayer.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayer: interactiveLayer, + ), + StateChangeDirection.forward, + ); + break; + } + } }); } } From ea4ddf4fe0f22e3ecbb1194aa4ea0aa9beafa810 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 17:06:23 +0800 Subject: [PATCH 069/311] fix lint warnings --- lib/src/add_ons/repository.dart | 3 ++- .../models/animation_info.dart | 3 +++ .../horizontal_line_interactable_drawing.dart | 25 ++----------------- .../interactive_layer/interactive_layer.dart | 8 +++--- .../interactive_layer_base.dart | 2 +- .../interactive_adding_tool_state.dart | 2 +- .../interactive_normal_state.dart | 4 +-- .../interactive_selected_tool_state.dart | 6 ++--- .../state_change_direction.dart | 20 ++++++++++++++- 9 files changed, 37 insertions(+), 36 deletions(-) diff --git a/lib/src/add_ons/repository.dart b/lib/src/add_ons/repository.dart index 1e749fbaa..7b3c8920a 100644 --- a/lib/src/add_ons/repository.dart +++ b/lib/src/add_ons/repository.dart @@ -35,5 +35,6 @@ abstract class Repository extends ChangeNotifier { /// Retrieves the hidden status of an indicator or drawing tool. bool getHiddenStatus(int index); - void update() {} + /// Triggers an update to the repository to update its listeners. + void update(); } diff --git a/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart b/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart index 5b9fd5ff7..cb8578c3d 100644 --- a/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart +++ b/lib/src/deriv_chart/chart/data_visualization/models/animation_info.dart @@ -1,3 +1,5 @@ +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; + /// A class that hold animation progress values. class AnimationInfo { /// Initializes @@ -13,5 +15,6 @@ class AnimationInfo { /// Animation percent of blinking dot in current tick. final double blinkingPercent; + /// Animation percent of [InteractiveLayer] state change. final double stateChangePercent; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index e9e4d642b..5fa44dfe9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -186,10 +186,7 @@ class HorizontalLineInteractableDrawing ..style = PaintingStyle.stroke; // Create path for horizontal guide - final Path horizontalPath = Path(); - - // Draw horizontal guide from the point - horizontalPath + final Path horizontalPath = Path() ..moveTo(0, pointOffset.dy) ..lineTo(size.width, pointOffset.dy); @@ -225,21 +222,6 @@ class HorizontalLineInteractableDrawing return dest; } - void _drawPoint( - EdgePoint point, - EpochToX epochToX, - QuoteToY quoteToY, - Canvas canvas, - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ) { - canvas.drawCircle( - Offset(epochToX(point.epoch), quoteToY(point.quote)), - 5, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); - } - void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { // Create a dashed paint style for the alignment guides final Paint guidesPaint = Paint() @@ -248,10 +230,7 @@ class HorizontalLineInteractableDrawing ..style = PaintingStyle.stroke; // Create path for horizontal guide - final Path horizontalPath = Path(); - - // Draw horizontal guide from the point - horizontalPath + final Path horizontalPath = Path() ..moveTo(0, pointOffset.dy) ..lineTo(size.width, pointOffset.dy); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index f758eb0e9..f29c5413a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -251,7 +251,7 @@ class _InteractiveLayerGestureHandlerState widget.addingDrawingTool!, interactiveLayer: this, ), - StateChangeDirection.forward, + StateChangeAnimationDirection.forward, ); } } @@ -259,11 +259,11 @@ class _InteractiveLayerGestureHandlerState @override Future updateStateTo( InteractiveState state, - StateChangeDirection direction, { + StateChangeAnimationDirection direction, { bool blocking = false, }) async { if (blocking) { - if (direction == StateChangeDirection.forward) { + if (direction == StateChangeAnimationDirection.forward) { _stateChangeController.reset(); await _stateChangeController.forward(); } else { @@ -271,7 +271,7 @@ class _InteractiveLayerGestureHandlerState } setState(() => _interactiveState = state); } else { - if (direction == StateChangeDirection.forward) { + if (direction == StateChangeAnimationDirection.forward) { _stateChangeController.reset(); unawaited(_stateChangeController.forward()); } else { diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index d26e35b73..50edc7b22 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -10,7 +10,7 @@ abstract class InteractiveLayerBase { /// Updates the state of the interactive layer to the [state]. void updateStateTo( InteractiveState state, - StateChangeDirection direction, { + StateChangeAnimationDirection direction, { bool blocking = false, }); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index be04eea5c..dc9e76191 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -92,7 +92,7 @@ class InteractiveAddingToolState extends InteractiveState selected: drawing, interactiveLayer: interactiveLayer, ), - StateChangeDirection.forward, + StateChangeAnimationDirection.forward, ); break; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index f2a2e802b..66eb9e28b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -41,7 +41,7 @@ class InteractiveNormalState extends InteractiveState interactiveLayer: interactiveLayer, ); - interactiveLayer.updateStateTo(newState, StateChangeDirection.forward); + interactiveLayer.updateStateTo(newState, StateChangeAnimationDirection.forward); newState.onPanStart(details); } @@ -64,7 +64,7 @@ class InteractiveNormalState extends InteractiveState selected: hitDrawing, interactiveLayer: interactiveLayer, ), - StateChangeDirection.forward, + StateChangeAnimationDirection.forward, ); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 0b53574aa..9a58eebf1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -81,7 +81,7 @@ class InteractiveSelectedToolState extends InteractiveState selected: hitDrawing, interactiveLayer: interactiveLayer, )..onPanStart(details), - StateChangeDirection.forward, + StateChangeAnimationDirection.forward, ); } } @@ -115,13 +115,13 @@ class InteractiveSelectedToolState extends InteractiveState selected: hitDrawing, interactiveLayer: interactiveLayer, ), - StateChangeDirection.forward, + StateChangeAnimationDirection.forward, ); } else { // If tap is on empty space, return to normal state. interactiveLayer.updateStateTo( InteractiveNormalState(interactiveLayer: interactiveLayer), - StateChangeDirection.backward, + StateChangeAnimationDirection.backward, blocking: true, ); } diff --git a/lib/src/deriv_chart/interactive_layer/state_change_direction.dart b/lib/src/deriv_chart/interactive_layer/state_change_direction.dart index ce905cb60..c528dee18 100644 --- a/lib/src/deriv_chart/interactive_layer/state_change_direction.dart +++ b/lib/src/deriv_chart/interactive_layer/state_change_direction.dart @@ -1 +1,19 @@ -enum StateChangeDirection { forward, backward } +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart'; + +/// Enum to represent the direction of the [InteractiveLayer] state change +/// animation. +/// +/// For example selecting a tool happens by a state change from +/// [InteractiveNormalState] to [InteractiveSelectedToolState] with a forward +/// this will help the [InteractiveLayer] to animate the transition forward so +/// we can see the tool being selected. since for deselecting we should see the +/// same animation but in reverse we can use the backward direction. +enum StateChangeAnimationDirection { + /// The forward direction. + forward, + + /// The backward direction. + backward, +} From 2413b9a28e3b3ca7bfb668b5e20ef7a223a35595 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 6 Mar 2025 17:44:32 +0800 Subject: [PATCH 070/311] fix formatting --- .../interactable_drawings/line_interactable_drawing.dart | 9 ++------- .../interactive_states/interactive_normal_state.dart | 3 ++- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 5e6629e99..679d1acc3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -194,13 +194,8 @@ class LineInteractableDrawing if (startPoint != null) { _drawPoint( startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - _drawPointAlignmentGuides( - canvas, - size, - Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote) - )); + _drawPointAlignmentGuides(canvas, size, + Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote))); if (_hoverPosition != null) { // endPoint doesn't exist yet and it means we're creating this line. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index 66eb9e28b..d9ce4767d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -41,7 +41,8 @@ class InteractiveNormalState extends InteractiveState interactiveLayer: interactiveLayer, ); - interactiveLayer.updateStateTo(newState, StateChangeAnimationDirection.forward); + interactiveLayer.updateStateTo( + newState, StateChangeAnimationDirection.forward); newState.onPanStart(details); } From 7faf9937e19e31eed0305791eaf90ca256767cec Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 7 Mar 2025 11:02:46 +0800 Subject: [PATCH 071/311] enable the cross hair again --- lib/src/deriv_chart/chart/main_chart.dart | 41 ++++++++++++----------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 36612bfe6..8c43ef8d9 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -16,6 +16,7 @@ import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'basic_chart.dart'; +import 'crosshair/crosshair_area.dart'; import 'multiple_animated_builder.dart'; import 'data_visualization/annotations/chart_annotation.dart'; import 'data_visualization/chart_data.dart'; @@ -138,7 +139,7 @@ class _ChartImplementationState extends BasicChartState { late Animation _currentTickBlinkAnimation; // TODO(Rustem): remove crosshair related state - final bool _isCrosshairMode = false; + bool _isCrosshairMode = false; bool get _isScrollToLastTickAvailable => (widget._mainSeries.entries?.isNotEmpty ?? false) && @@ -365,8 +366,8 @@ class _ChartImplementationState extends BasicChartState { epochFromCanvasX: xAxis.epochFromX, ), if (kIsWeb) _buildCrosshairAreaWeb(), - // if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) - // _buildCrosshairArea(), + if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) + _buildCrosshairArea(), if (widget.showScrollToLastTickButton && _isScrollToLastTickAvailable) Positioned( @@ -441,23 +442,23 @@ class _ChartImplementationState extends BasicChartState { ]), ); - // Widget _buildCrosshairArea() => AnimatedBuilder( - // animation: crosshairZoomOutAnimation, - // builder: (BuildContext context, _) => CrosshairArea( - // mainSeries: widget.mainSeries as DataSeries, - // pipSize: widget.pipSize, - // quoteToCanvasY: chartQuoteToCanvasY, - // onCrosshairAppeared: () { - // _isCrosshairMode = true; - // widget.onCrosshairAppeared?.call(); - // crosshairZoomOutAnimationController.forward(); - // }, - // onCrosshairDisappeared: () { - // _isCrosshairMode = false; - // crosshairZoomOutAnimationController.reverse(); - // }, - // ), - // ); + Widget _buildCrosshairArea() => AnimatedBuilder( + animation: crosshairZoomOutAnimation, + builder: (BuildContext context, _) => CrosshairArea( + mainSeries: widget.mainSeries as DataSeries, + pipSize: widget.pipSize, + quoteToCanvasY: chartQuoteToCanvasY, + onCrosshairAppeared: () { + _isCrosshairMode = true; + widget.onCrosshairAppeared?.call(); + crosshairZoomOutAnimationController.forward(); + }, + onCrosshairDisappeared: () { + _isCrosshairMode = false; + crosshairZoomOutAnimationController.reverse(); + }, + ), + ); Widget _buildCrosshairAreaWeb() => CrosshairAreaWeb( mainSeries: widget.mainSeries as DataSeries, From 8b43c663a0f16441cb33c62a54e63eb60d29b6d5 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 7 Mar 2025 14:40:16 +0800 Subject: [PATCH 072/311] add a todo --- lib/src/deriv_chart/chart/main_chart.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 8c43ef8d9..a3ece66a7 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -365,6 +365,7 @@ class _ChartImplementationState extends BasicChartState { quoteFromCanvasY: chartQuoteFromCanvasY, epochFromCanvasX: xAxis.epochFromX, ), + // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) _buildCrosshairArea(), From 12934451d71894f18633b3015b250a709ee1e5ed Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 7 Mar 2025 15:33:32 +0800 Subject: [PATCH 073/311] keep InteractiveLayer disabled for the moment --- lib/src/deriv_chart/chart/main_chart.dart | 57 +++++++++++------------ lib/src/deriv_chart/deriv_chart.dart | 8 ++-- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index a3ece66a7..fc5ecfb41 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -1,7 +1,4 @@ import 'package:collection/collection.dart' show IterableExtension; -import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/add_ons/repository.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; import 'package:deriv_chart/src/models/tick.dart'; @@ -15,6 +12,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; +import '../drawing_tool_chart/drawing_tool_chart.dart'; import 'basic_chart.dart'; import 'crosshair/crosshair_area.dart'; import 'multiple_animated_builder.dart'; @@ -351,20 +349,20 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - // if (widget.drawingTools != null) - // _buildDrawingToolChart(widget.drawingTools!), if (widget.drawingTools != null) - InteractiveLayer( - drawingTools: widget.drawingTools!, - series: widget.mainSeries as DataSeries, - drawingToolsRepo: - context.watch>(), - chartConfig: context.watch(), - quoteToCanvasY: chartQuoteToCanvasY, - epochToCanvasX: xAxis.xFromEpoch, - quoteFromCanvasY: chartQuoteFromCanvasY, - epochFromCanvasX: xAxis.epochFromX, - ), + _buildDrawingToolChart(widget.drawingTools!), + // if (widget.drawingTools != null) + // InteractiveLayer( + // drawingTools: widget.drawingTools!, + // series: widget.mainSeries as DataSeries, + // drawingToolsRepo: + // context.watch>(), + // chartConfig: context.watch(), + // quoteToCanvasY: chartQuoteToCanvasY, + // epochToCanvasX: xAxis.xFromEpoch, + // quoteFromCanvasY: chartQuoteFromCanvasY, + // epochFromCanvasX: xAxis.epochFromX, + // ), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) @@ -389,19 +387,20 @@ class _ChartImplementationState extends BasicChartState { }, ); - // Widget _buildDrawingToolChart(DrawingTools drawingTools) => - // MultipleAnimatedBuilder( - // animations: [ - // topBoundQuoteAnimationController, - // bottomBoundQuoteAnimationController, - // ], - // builder: (_, Widget? child) => DrawingToolChart( - // series: widget.mainSeries as DataSeries, - // chartQuoteToCanvasY: chartQuoteToCanvasY, - // chartQuoteFromCanvasY: chartQuoteFromCanvasY, - // drawingTools: drawingTools, - // ), - // ); + Widget _buildDrawingToolChart(DrawingTools drawingTools) => + MultipleAnimatedBuilder( + animations: [ + topBoundQuoteAnimationController, + bottomBoundQuoteAnimationController, + ], + builder: (_, Widget? child) => DrawingToolChart( + // key: const ValueKey('drawing_tool_chart'), + series: widget.mainSeries as DataSeries, + chartQuoteToCanvasY: chartQuoteToCanvasY, + chartQuoteFromCanvasY: chartQuoteFromCanvasY, + drawingTools: drawingTools, + ), + ); Widget _buildLoadingAnimation() => LoadingAnimationArea( loadingRightBoundX: widget._mainSeries.input.isEmpty diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 12c8995d0..4be20d76a 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -261,10 +261,10 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - // _drawingTools - // // ..init() - // .drawingToolsRepo = _drawingToolsRepo; - _drawingTools.drawingToolsRepo = _drawingToolsRepo; + _drawingTools + ..init() + ..drawingToolsRepo = _drawingToolsRepo; + // _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( context: context, From d3027ffb9ab3e2271d6c377c24bc9c3420879eab Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 7 Mar 2025 16:01:21 +0800 Subject: [PATCH 074/311] fix some import issues --- .../interactive_states/interactive_adding_tool_state.dart | 6 +++--- .../interactive_states/interactive_normal_state.dart | 4 ++-- .../interactive_states/interactive_selected_tool_state.dart | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index dc9e76191..28715c70e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -1,11 +1,11 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/gestures.dart'; import '../interactable_drawings/interactable_drawing.dart'; +import '../state_change_direction.dart'; +import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; +import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is being added. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index d9ce4767d..5823dfe4b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -1,10 +1,10 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawings/interactable_drawing.dart'; -import 'Interactive_hover_state.dart'; +import '../state_change_direction.dart'; +import 'interactive_hover_state.dart'; import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 9a58eebf1..037a71cbb 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -1,9 +1,9 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/Interactive_hover_state.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/state_change_direction.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawings/interactable_drawing.dart'; +import '../state_change_direction.dart'; +import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; import 'interactive_state.dart'; From 741ed178efafb9636927409e0e769e6f43c53a27 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 7 Mar 2025 16:16:14 +0800 Subject: [PATCH 075/311] code cleanup :recycle: --- .../interactable_drawing_custom_painter.dart | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 61e8c694b..0aa9bc612 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; @@ -42,16 +43,16 @@ class InteractableDrawingCustomPainter extends CustomPainter { final ChartConfig chartConfig; /// Converts x coordinate (in pixels) to epoch timestamp. - final int Function(double x) epochFromX; + final EpochFromX epochFromX; /// Converts epoch timestamp to x coordinate (in pixels). - final double Function(int x) epochToX; + final EpochToX epochToX; /// Converts y coordinate (in pixels) to quote value. - final double Function(double y) quoteToY; + final QuoteToY quoteToY; /// Converts quote value to y coordinate (in pixels). - double Function(double) quoteFromY; + final QuoteFromY quoteFromY; /// Showing animations progress. final AnimationInfo animationInfo; @@ -70,7 +71,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { animationInfo, getDrawingState, ); - // TODO(NA): Paint the [drawing] }); } @@ -84,11 +84,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { false; @override - bool hitTest(Offset position) { - if (drawing.hitTest(position, epochToX, quoteToY)) { - // onDrawingToolClicked(); - return true; - } - return false; - } + bool hitTest(Offset position) => + drawing.hitTest(position, epochToX, quoteToY); } From 1ca45a0a4b22af977c8a0a053ae8906233756797 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 11 Mar 2025 14:49:19 +0800 Subject: [PATCH 076/311] WIP: control repaiting --- lib/src/deriv_chart/chart/main_chart.dart | 68 +++++---- .../interactable_drawing_custom_painter.dart | 19 ++- .../horizontal_line_interactable_drawing.dart | 3 + .../interactable_drawing.dart | 8 +- .../line_interactable_drawing.dart | 14 ++ .../interactive_layer/interactive_layer.dart | 134 ++++++++++-------- lib/src/models/axis_range.dart | 33 +++++ 7 files changed, 184 insertions(+), 95 deletions(-) create mode 100644 lib/src/models/axis_range.dart diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index fc5ecfb41..4028c2f4a 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -1,5 +1,9 @@ import 'package:collection/collection.dart' show IterableExtension; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/repository.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; import 'package:deriv_chart/src/models/tick.dart'; import 'package:flutter/foundation.dart' show kIsWeb; @@ -12,7 +16,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; -import '../drawing_tool_chart/drawing_tool_chart.dart'; import 'basic_chart.dart'; import 'crosshair/crosshair_area.dart'; import 'multiple_animated_builder.dart'; @@ -349,20 +352,30 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - if (widget.drawingTools != null) - _buildDrawingToolChart(widget.drawingTools!), // if (widget.drawingTools != null) - // InteractiveLayer( - // drawingTools: widget.drawingTools!, - // series: widget.mainSeries as DataSeries, - // drawingToolsRepo: - // context.watch>(), - // chartConfig: context.watch(), - // quoteToCanvasY: chartQuoteToCanvasY, - // epochToCanvasX: xAxis.xFromEpoch, - // quoteFromCanvasY: chartQuoteFromCanvasY, - // epochFromCanvasX: xAxis.epochFromX, - // ), + // _buildDrawingToolChart(widget.drawingTools!), + if (widget.drawingTools != null) + MultipleAnimatedBuilder( + animations: >[ + topBoundQuoteAnimationController, + bottomBoundQuoteAnimationController + ], + builder: (_, __) => InteractiveLayer( + drawingTools: widget.drawingTools!, + series: widget.mainSeries as DataSeries, + drawingToolsRepo: + context.watch>(), + chartConfig: context.watch(), + quoteToCanvasY: chartQuoteToCanvasY, + epochToCanvasX: xAxis.xFromEpoch, + quoteFromCanvasY: chartQuoteFromCanvasY, + epochFromCanvasX: xAxis.epochFromX, + quoteRange: QuoteRange( + topQuote: topBoundQuoteAnimationController.value, + bottomQuote: bottomBoundQuoteAnimationController.value, + ), + ), + ), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) @@ -387,20 +400,19 @@ class _ChartImplementationState extends BasicChartState { }, ); - Widget _buildDrawingToolChart(DrawingTools drawingTools) => - MultipleAnimatedBuilder( - animations: [ - topBoundQuoteAnimationController, - bottomBoundQuoteAnimationController, - ], - builder: (_, Widget? child) => DrawingToolChart( - // key: const ValueKey('drawing_tool_chart'), - series: widget.mainSeries as DataSeries, - chartQuoteToCanvasY: chartQuoteToCanvasY, - chartQuoteFromCanvasY: chartQuoteFromCanvasY, - drawingTools: drawingTools, - ), - ); + // Widget _buildDrawingToolChart(DrawingTools drawingTools) => + // MultipleAnimatedBuilder( + // animations: [ + // topBoundQuoteAnimationController, + // bottomBoundQuoteAnimationController, + // ], + // builder: (_, Widget? child) => DrawingToolChart( + // series: widget.mainSeries as DataSeries, + // chartQuoteToCanvasY: chartQuoteToCanvasY, + // chartQuoteFromCanvasY: chartQuoteFromCanvasY, + // drawingTools: drawingTools, + // ), + // ); Widget _buildLoadingAnimation() => LoadingAnimationArea( loadingRightBoundX: widget._mainSeries.input.isEmpty diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 0aa9bc612..42b71357e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/rendering.dart'; @@ -27,6 +28,8 @@ class InteractableDrawingCustomPainter extends CustomPainter { required this.quoteToY, required this.quoteFromY, required this.getDrawingState, + required this.epochRange, + required this.quoteRange, this.animationInfo = const AnimationInfo(), }); @@ -57,11 +60,18 @@ class InteractableDrawingCustomPainter extends CustomPainter { /// Showing animations progress. final AnimationInfo animationInfo; + /// Current epoch range (x-axis) of the chart; + final EpochRange epochRange; + + /// Current quote range (y-axis) of the chart; + final QuoteRange quoteRange; + /// Returns `true` if the drawing tool is selected. final Set Function(InteractableDrawing) getDrawingState; @override void paint(Canvas canvas, Size size) { + // print('####.painting ${DateTime.now()}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, @@ -75,9 +85,12 @@ class InteractableDrawingCustomPainter extends CustomPainter { } @override - bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) => - // TODO(NA): Return true/false based on the [drawing] state - true; + bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) { + return oldDelegate.drawing != drawing || + oldDelegate.epochRange != epochRange || + oldDelegate.quoteRange != quoteRange || + drawing.shouldRepaint(getDrawingState); + } @override bool shouldRebuildSemantics(InteractableDrawingCustomPainter oldDelegate) => diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 5fa44dfe9..9222a62b9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -306,6 +306,9 @@ class HorizontalLineInteractableDrawing @override HorizontalDrawingToolConfig getUpdatedConfig() => config .copyWith(edgePoints: [if (startPoint != null) startPoint!]); + + @override + List get props => [startPoint]; } /// A circular array for dash patterns diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 83121058f..194d4bd72 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:equatable/equatable.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -45,7 +46,8 @@ enum DrawingToolState { /// with the tools in the runtime. /// During the time that user interacts with a tool. by some debounce mechanism /// This class will update the config which is supposed to be saved in the storage. -abstract class InteractableDrawing { +abstract class InteractableDrawing + with EquatableMixin { /// Initializes [InteractableDrawing]. InteractableDrawing({required this.config}); @@ -129,4 +131,8 @@ abstract class InteractableDrawing { AnimationInfo animationInfo, GetDrawingState getDrawingState, ); + + /// Returns true if the drawing tool should repaint. + bool shouldRepaint(GetDrawingState getState) => + true; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 679d1acc3..29f7dc4ef 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -461,6 +461,20 @@ class LineInteractableDrawing if (startPoint != null) startPoint!, if (endPoint != null) endPoint! ]); + + @override + List get props => [startPoint, endPoint]; + + @override + bool shouldRepaint(GetDrawingState getState) { + if (startPoint == null || endPoint == null) { + return false; + } + + return getState(this).contains(DrawingToolState.selected) || + getState(this).contains(DrawingToolState.hovered) || + getState(this).contains(DrawingToolState.dragging); + } } /// A circular array for dash patterns diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index f29c5413a..3c079ebef 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -4,6 +4,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/material.dart'; @@ -21,7 +22,6 @@ import 'interactive_states/interactive_adding_tool_state.dart'; import 'interactive_states/interactive_normal_state.dart'; import 'interactive_states/interactive_state.dart'; import 'state_change_direction.dart'; -// ignore_for_file: public_member_api_docs /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. @@ -36,6 +36,7 @@ class InteractiveLayer extends StatefulWidget { required this.epochToCanvasX, required this.epochFromCanvasX, required this.drawingToolsRepo, + required this.quoteRange, super.key, }); @@ -63,21 +64,14 @@ class InteractiveLayer extends StatefulWidget { /// Converts epoch to canvas X coordinate. final EpochToX epochToCanvasX; + /// Chart's y-axis range. + final QuoteRange quoteRange; + @override State createState() => _InteractiveLayerState(); } class _InteractiveLayerState extends State { - /// 1. Keep the state of the selected tool here, the tool that the focus is on - /// it right now - /// 2. provide callback to outside to let them what is the current selected tool - /// 3. This widget will handle adding a tool, can delegate adding to inner components - /// but anyway it will happen here. either directly or indirectly through inner components - /// 4. This widget knows the current selected tool, will update its position when its interacted - /// 5. the decision to make which tool is selected based on the user click and it's coordinate will happen here - /// 6. - /// - final List _interactableDrawings = []; /// Timer for debouncing repository updates @@ -157,6 +151,7 @@ class _InteractiveLayerState extends State { @override Widget build(BuildContext context) { + print('Rebuild InteractiveLayer ${widget.quoteRange} ${DateTime.now()}'); return _InteractiveLayerGestureHandler( drawings: _interactableDrawings, epochFromX: widget.epochFromCanvasX, @@ -166,6 +161,7 @@ class _InteractiveLayerState extends State { series: widget.series, chartConfig: widget.chartConfig, addingDrawingTool: widget.drawingTools.selectedDrawingTool, + quoteRange: widget.quoteRange, onClearAddingDrawingTool: widget.drawingTools.clearDrawingToolSelection, onSaveDrawingChange: _updateConfigInRepository, onAddDrawing: _addDrawingToRepo, @@ -184,6 +180,7 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { required this.chartConfig, required this.onClearAddingDrawingTool, required this.onAddDrawing, + required this.quoteRange, this.addingDrawingTool, this.onSaveDrawingChange, }); @@ -209,6 +206,7 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { final QuoteFromY quoteFromY; final EpochToX epochToX; final QuoteToY quoteToY; + final QuoteRange quoteRange; @override State<_InteractiveLayerGestureHandler> createState() => @@ -284,69 +282,79 @@ class _InteractiveLayerGestureHandlerState @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); - return Semantics( - child: MouseRegion( - onHover: (event) { - _interactiveState.onHover(event); - }, - child: GestureDetector( - onTapUp: (details) => _interactiveState.onTap(details), - onPanStart: (details) => _interactiveState.onPanStart(details), - onPanUpdate: (details) => _interactiveState.onPanUpdate(details), - onPanEnd: (details) => _interactiveState.onPanEnd(details), - // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement - // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. - child: AnimatedBuilder( - animation: _stateChangeController, - builder: (_, __) { - final double animationValue = - _stateChangeCurve.transform(_stateChangeController.value); - - return Stack( + return MouseRegion( + onHover: (event) { + _interactiveState.onHover(event); + }, + child: GestureDetector( + onTapUp: (details) => _interactiveState.onTap(details), + onPanStart: (details) => _interactiveState.onPanStart(details), + onPanUpdate: (details) => _interactiveState.onPanUpdate(details), + onPanEnd: (details) => _interactiveState.onPanEnd(details), + // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement + // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. + child: AnimatedBuilder( + animation: _stateChangeController, + builder: (_, __) { + final double animationValue = + _stateChangeCurve.transform(_stateChangeController.value); + + return RepaintBoundary( + child: Stack( fit: StackFit.expand, children: [ ...widget.drawings .map((e) => CustomPaint( - foregroundPainter: InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - getDrawingState: _interactiveState.getToolState, - animationInfo: AnimationInfo( - stateChangePercent: animationValue, - ) - // onDrawingToolClicked: () => _selectedDrawing = e, - ), + foregroundPainter: + InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: _interactiveState.getToolState, + quoteRange: widget.quoteRange, + epochRange: EpochRange( + leftEpoch: xAxis.leftBoundEpoch, + rightEpoch: xAxis.rightBoundEpoch, + ), + animationInfo: AnimationInfo( + stateChangePercent: animationValue, + ), + ), )) .toList(), ..._interactiveState.previewDrawings .map((e) => CustomPaint( - foregroundPainter: InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - getDrawingState: - _interactiveState.getToolState, - animationInfo: AnimationInfo( - stateChangePercent: animationValue) - // onDrawingToolClicked: () => _selectedDrawing = e, - ), + foregroundPainter: + InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + getDrawingState: _interactiveState.getToolState, + quoteRange: widget.quoteRange, + epochRange: EpochRange( + leftEpoch: xAxis.leftBoundEpoch, + rightEpoch: xAxis.rightBoundEpoch, + ), + animationInfo: AnimationInfo( + stateChangePercent: animationValue, + ), + ), )) .toList(), ], - ); - }), - ), + ), + ); + }), ), ); } diff --git a/lib/src/models/axis_range.dart b/lib/src/models/axis_range.dart new file mode 100644 index 000000000..00a431a78 --- /dev/null +++ b/lib/src/models/axis_range.dart @@ -0,0 +1,33 @@ +import 'package:equatable/equatable.dart'; + +/// Class that represents the range of epoch from left to right. +/// Can use to represent the x-axis range on the chart. +class EpochRange with EquatableMixin { + /// Initializes. + EpochRange({required this.rightEpoch, required this.leftEpoch}); + + /// The left-most epoch. + final int leftEpoch; + + /// The right-most epoch. + final int rightEpoch; + + @override + List get props => [leftEpoch, rightEpoch]; +} + +/// Class that represents the range of quotes from top to bottom. +/// Can use to represent the Y-axis range of the chart. +class QuoteRange with EquatableMixin { + /// Initializes. + QuoteRange({required this.topQuote, required this.bottomQuote}); + + /// The top-most quote. + final double topQuote; + + /// The bottom-most quote. + final double bottomQuote; + + @override + List get props => [topQuote, bottomQuote]; +} From fd18911972aebd3b790cfd9b3c6e44aa19a0b0f9 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 11 Mar 2025 16:28:35 +0800 Subject: [PATCH 077/311] providing YAxisModel --- lib/src/deriv_chart/chart/main_chart.dart | 124 ++++++++++-------- .../deriv_chart/chart/y_axis/quote_grid.dart | 14 ++ .../interactable_drawing_custom_painter.dart | 4 + .../interactive_layer/interactive_layer.dart | 1 + 4 files changed, 87 insertions(+), 56 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 4028c2f4a..be8f80c3d 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -31,6 +31,8 @@ import '../../misc/callbacks.dart'; import '../../theme/chart_theme.dart'; import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; +import 'y_axis/quote_grid.dart'; + /// The main chart to display in the chart widget. class MainChart extends BasicChart { /// Initializes the main chart to display in the chart widget. @@ -153,6 +155,8 @@ class _ChartImplementationState extends BasicChartState { /// The current animation value of crosshair zoom out. late Animation crosshairZoomOutAnimation; + final YAxisNotifier _yAxisNotifier = YAxisNotifier(YAxisModel.zero()); + @override double get verticalPadding { if (canvasSize == null) { @@ -335,66 +339,74 @@ class _ChartImplementationState extends BasicChartState { constraints.maxHeight, ); + if (yAxisModel != null) { + _yAxisNotifier.value = yAxisModel!; + } + updateVisibleData(); // TODO(mohammadamir-fs): Remove Extra ClipRect. - return ClipRect( - child: Stack( - fit: StackFit.expand, - children: [ - // _buildQuoteGridLine(gridLineQuotes), - - if (widget.showLoadingAnimationForHistoricalData || - (widget._mainSeries.entries?.isEmpty ?? false)) - _buildLoadingAnimation(), - // _buildQuoteGridLabel(gridLineQuotes), - super.build(context), - if (widget.overlaySeries != null) - _buildSeries(widget.overlaySeries!), - _buildAnnotations(), - if (widget.markerSeries != null) _buildMarkerArea(), - // if (widget.drawingTools != null) - // _buildDrawingToolChart(widget.drawingTools!), - if (widget.drawingTools != null) - MultipleAnimatedBuilder( - animations: >[ - topBoundQuoteAnimationController, - bottomBoundQuoteAnimationController - ], - builder: (_, __) => InteractiveLayer( - drawingTools: widget.drawingTools!, - series: widget.mainSeries as DataSeries, - drawingToolsRepo: - context.watch>(), - chartConfig: context.watch(), - quoteToCanvasY: chartQuoteToCanvasY, - epochToCanvasX: xAxis.xFromEpoch, - quoteFromCanvasY: chartQuoteFromCanvasY, - epochFromCanvasX: xAxis.epochFromX, - quoteRange: QuoteRange( - topQuote: topBoundQuoteAnimationController.value, - bottomQuote: bottomBoundQuoteAnimationController.value, + return Provider.value( + value: _yAxisNotifier, + child: ClipRect( + child: Stack( + fit: StackFit.expand, + children: [ + // _buildQuoteGridLine(gridLineQuotes), + + if (widget.showLoadingAnimationForHistoricalData || + (widget._mainSeries.entries?.isEmpty ?? false)) + _buildLoadingAnimation(), + // _buildQuoteGridLabel(gridLineQuotes), + super.build(context), + if (widget.overlaySeries != null) + _buildSeries(widget.overlaySeries!), + _buildAnnotations(), + if (widget.markerSeries != null) _buildMarkerArea(), + // if (widget.drawingTools != null) + // _buildDrawingToolChart(widget.drawingTools!), + if (widget.drawingTools != null) + MultipleAnimatedBuilder( + animations: [ + topBoundQuoteAnimationController, + bottomBoundQuoteAnimationController, + _yAxisNotifier, + ], + builder: (_, __) => InteractiveLayer( + drawingTools: widget.drawingTools!, + series: widget.mainSeries as DataSeries, + drawingToolsRepo: + context.watch>(), + chartConfig: context.watch(), + quoteToCanvasY: chartQuoteToCanvasY, + epochToCanvasX: xAxis.xFromEpoch, + quoteFromCanvasY: chartQuoteFromCanvasY, + epochFromCanvasX: xAxis.epochFromX, + quoteRange: QuoteRange( + topQuote: topBoundQuoteAnimationController.value, + bottomQuote: bottomBoundQuoteAnimationController.value, + ), ), ), - ), - // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer - if (kIsWeb) _buildCrosshairAreaWeb(), - if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) - _buildCrosshairArea(), - if (widget.showScrollToLastTickButton && - _isScrollToLastTickAvailable) - Positioned( - bottom: 0, - right: quoteLabelsTouchAreaWidth, - child: _buildScrollToLastTickButton(), - ), - if (widget.showDataFitButton && - (widget._mainSeries.entries?.isNotEmpty ?? false)) - Positioned( - bottom: 0, - left: 0, - child: _buildDataFitButton(), - ), - ], + // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer + if (kIsWeb) _buildCrosshairAreaWeb(), + if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) + _buildCrosshairArea(), + if (widget.showScrollToLastTickButton && + _isScrollToLastTickAvailable) + Positioned( + bottom: 0, + right: quoteLabelsTouchAreaWidth, + child: _buildScrollToLastTickButton(), + ), + if (widget.showDataFitButton && + (widget._mainSeries.entries?.isNotEmpty ?? false)) + Positioned( + bottom: 0, + left: 0, + child: _buildDataFitButton(), + ), + ], + ), ), ); }, diff --git a/lib/src/deriv_chart/chart/y_axis/quote_grid.dart b/lib/src/deriv_chart/chart/y_axis/quote_grid.dart index 75b91c2db..7994e221c 100644 --- a/lib/src/deriv_chart/chart/y_axis/quote_grid.dart +++ b/lib/src/deriv_chart/chart/y_axis/quote_grid.dart @@ -1,3 +1,5 @@ +import 'package:flutter/foundation.dart'; + ///A Model for calculating the grid intervals and quotes. class YAxisModel { ///Initializes a Model for calculating the grid intervals and quotes. @@ -22,6 +24,14 @@ class YAxisModel { _topPadding = topPadding, _bottomPadding = bottomPadding; + YAxisModel.zero() + : _quoteGridInterval = 0, + _topBoundQuote = 0, + _bottomBoundQuote = 0, + _canvasHeight = 0, + _topPadding = 0, + _bottomPadding = 0; + final double _quoteGridInterval; final double _topBoundQuote; final double _bottomBoundQuote; @@ -114,3 +124,7 @@ double quoteGridInterval( orElse: () => intervals.last, ); } + +class YAxisNotifier extends ValueNotifier { + YAxisNotifier(super.value); +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 42b71357e..7bcc0741a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/y_axis/quote_grid.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -69,6 +70,9 @@ class InteractableDrawingCustomPainter extends CustomPainter { /// Returns `true` if the drawing tool is selected. final Set Function(InteractableDrawing) getDrawingState; + /// Y axis model. + final YAxisModel yAxisModel; + @override void paint(Canvas canvas, Size size) { // print('####.painting ${DateTime.now()}'); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 3c079ebef..5caec7fb6 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -4,6 +4,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/y_axis/quote_grid.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; From 0ff90a5c0a401db06ca9d404fe866489eb40dac6 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 21 Apr 2025 10:58:33 +0800 Subject: [PATCH 078/311] use ListenableProvider instead --- lib/src/deriv_chart/chart/main_chart.dart | 8 +++++--- .../interactable_drawing_custom_painter.dart | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 9b2ad662e..2a2702598 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -350,7 +350,7 @@ class _ChartImplementationState extends BasicChartState { updateVisibleData(); // TODO(mohammadamir-fs): Remove Extra ClipRect. - return Provider.value( + return ListenableProvider.value( value: _yAxisNotifier, child: ClipRect( child: Stack( @@ -388,13 +388,15 @@ class _ChartImplementationState extends BasicChartState { epochFromCanvasX: xAxis.epochFromX, quoteRange: QuoteRange( topQuote: topBoundQuoteAnimationController.value, - bottomQuote: bottomBoundQuoteAnimationController.value, + bottomQuote: + bottomBoundQuoteAnimationController.value, ), ), ), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), - if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) + if (!kIsWeb && + !(widget.drawingTools?.isDrawingMoving ?? false)) _buildCrosshairArea(), if (widget.showScrollToLastTickButton && _isScrollToLastTickAvailable) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 42b71357e..3580f3caf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -71,7 +71,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - // print('####.painting ${DateTime.now()}'); + print('####.painting ${DateTime.now()}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, From ab63b68f25a22c9e29006bfcebc402515aedbf52 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 21 Apr 2025 11:51:54 +0800 Subject: [PATCH 079/311] Check isInEpochRange for drawings --- .../extensions/extensions.dart | 16 ++++++++++++++-- .../interactable_drawing_custom_painter.dart | 14 ++++++++------ .../interactable_drawing.dart | 6 ++++-- .../line_interactable_drawing.dart | 7 +++++++ 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart b/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart index 3c84416aa..0a1a868bd 100644 --- a/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart +++ b/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart @@ -1,5 +1,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.dart'; +import '../drawing_tools/data_model/edge_point.dart'; + // TODO(NA): consider EdgePoint radius as well in this calculation. /// The distance from the left and right sides of the chart viewport that should /// still be considered part of the visible area. This ensures that a point is @@ -30,9 +32,19 @@ extension DraggableEdgePointExtension on DraggableEdgePoint { /// The view port range is defined by the left and right epoch values. /// returns true if the edge point is on the view port range. bool isInViewPortRange(int leftEpoch, int rightEpoch) => - draggedEdgePoint.epoch >= + draggedEdgePoint.isInViewPortRange(leftEpoch, rightEpoch); +} + +/// An extension on DraggableEdgePoint class that adds some helper methods. +extension EdgePointExtension on EdgePoint { + /// Checks if the edge point is on the view port range. + /// + /// The view port range is defined by the left and right epoch values. + /// returns true if the edge point is on the view port range. + bool isInViewPortRange(int leftEpoch, int rightEpoch) => + epoch >= (leftEpoch - getPointOffScreenBufferDistance(leftEpoch, rightEpoch)) && - draggedEdgePoint.epoch <= + epoch <= (rightEpoch + getPointOffScreenBufferDistance(leftEpoch, rightEpoch)); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 3580f3caf..09a48e5a0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -85,12 +85,14 @@ class InteractableDrawingCustomPainter extends CustomPainter { } @override - bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) { - return oldDelegate.drawing != drawing || - oldDelegate.epochRange != epochRange || - oldDelegate.quoteRange != quoteRange || - drawing.shouldRepaint(getDrawingState); - } + bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) => + drawing.isInEpochRange( + epochRange.leftEpoch, + epochRange.rightEpoch, + ) && + (oldDelegate.epochRange != epochRange || + oldDelegate.quoteRange != quoteRange || + drawing.shouldRepaint(getDrawingState)); @override bool shouldRebuildSemantics(InteractableDrawingCustomPainter oldDelegate) => diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 194d4bd72..9980f4b28 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -133,6 +133,8 @@ abstract class InteractableDrawing ); /// Returns true if the drawing tool should repaint. - bool shouldRepaint(GetDrawingState getState) => - true; + bool shouldRepaint(GetDrawingState getState) => true; + + /// Whether this drawing is in epoch range. + bool isInEpochRange(int leftEpoch, int rightEpoch) => true; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 29f7dc4ef..0ba3fe594 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,5 +1,7 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/channel/channel_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -475,6 +477,11 @@ class LineInteractableDrawing getState(this).contains(DrawingToolState.hovered) || getState(this).contains(DrawingToolState.dragging); } + + @override + bool isInEpochRange(int leftEpoch, int rightEpoch) => + (startPoint?.isInViewPortRange(leftEpoch, rightEpoch) ?? true) || + (endPoint?.isInViewPortRange(leftEpoch, rightEpoch) ?? true); } /// A circular array for dash patterns From 02e48d3208dd757f0e52f128233c448adedaf53a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 21 Apr 2025 13:55:01 +0800 Subject: [PATCH 080/311] call setState after gesture callbacks --- .../interactable_drawing_custom_painter.dart | 30 +++++++++++++------ .../interactive_layer/interactive_layer.dart | 22 +++++++++++--- 2 files changed, 39 insertions(+), 13 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 09a48e5a0..f4facffc3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -71,7 +71,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - print('####.painting ${DateTime.now()}'); + print('#### Painting ${DateTime.now()}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, @@ -85,14 +85,26 @@ class InteractableDrawingCustomPainter extends CustomPainter { } @override - bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) => - drawing.isInEpochRange( - epochRange.leftEpoch, - epochRange.rightEpoch, - ) && - (oldDelegate.epochRange != epochRange || - oldDelegate.quoteRange != quoteRange || - drawing.shouldRepaint(getDrawingState)); + bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) { + final drawingIsInRange = drawing.isInEpochRange( + epochRange.leftEpoch, + epochRange.rightEpoch, + ); + + // TODO(Ramin): determine these lazily to avoid unnecessary calculations + final epochRangIsChanged = oldDelegate.epochRange != epochRange; + final quoteRangeIsChanged = oldDelegate.quoteRange != quoteRange; + final drawingShouldRepaint = drawing.shouldRepaint(getDrawingState); + + // print('DrawingIsInRange: $drawingIsInRange, ' + // 'epochRangIsChanged: $epochRangIsChanged, ' + // 'quoteRangeIsChanged: $quoteRangeIsChanged, ' + // 'drawingShouldRepaint: $drawingShouldRepaint'); + + // return true; + return drawingIsInRange && + (epochRangIsChanged || quoteRangeIsChanged || drawingShouldRepaint); + } @override bool shouldRebuildSemantics(InteractableDrawingCustomPainter oldDelegate) => diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 0bce40248..39c78da9a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -284,12 +284,25 @@ class _InteractiveLayerGestureHandlerState return MouseRegion( onHover: (event) { _interactiveState.onHover(event); + setState(() {}); }, child: GestureDetector( - onTapUp: (details) => _interactiveState.onTap(details), - onPanStart: (details) => _interactiveState.onPanStart(details), - onPanUpdate: (details) => _interactiveState.onPanUpdate(details), - onPanEnd: (details) => _interactiveState.onPanEnd(details), + onTapUp: (details) { + _interactiveState.onTap(details); + setState(() {}); + }, + onPanStart: (details) { + _interactiveState.onPanStart(details); + setState(() {}); + }, + onPanUpdate: (details) { + _interactiveState.onPanUpdate(details); + setState(() {}); + }, + onPanEnd: (details) { + _interactiveState.onPanEnd(details); + setState(() {}); + }, // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. child: AnimatedBuilder( @@ -362,6 +375,7 @@ class _InteractiveLayerGestureHandlerState void onTap(TapUpDetails details) { _interactiveState.onTap(details); + setState(() {}); } @override From 90540ef3bde71630c681db78b02be1266e15faca Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 21 Apr 2025 14:27:27 +0800 Subject: [PATCH 081/311] some minor changes --- .../interactable_drawing_custom_painter.dart | 10 +++++----- .../line_interactable_drawing.dart | 11 +++++------ 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index f4facffc3..8a22f7933 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -71,7 +71,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - print('#### Painting ${DateTime.now()}'); + // print('#### Painting ${DateTime.now()}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, @@ -96,10 +96,10 @@ class InteractableDrawingCustomPainter extends CustomPainter { final quoteRangeIsChanged = oldDelegate.quoteRange != quoteRange; final drawingShouldRepaint = drawing.shouldRepaint(getDrawingState); - // print('DrawingIsInRange: $drawingIsInRange, ' - // 'epochRangIsChanged: $epochRangIsChanged, ' - // 'quoteRangeIsChanged: $quoteRangeIsChanged, ' - // 'drawingShouldRepaint: $drawingShouldRepaint'); + print('DrawingIsInRange: $drawingIsInRange, ' + // 'epochRangIsChanged: $epochRangIsChanged, ' + // 'quoteRangeIsChanged: $quoteRangeIsChanged, ' + 'drawingShouldRepaint: $drawingShouldRepaint'); // return true; return drawingIsInRange && diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 0ba3fe594..f59c58266 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -469,13 +469,12 @@ class LineInteractableDrawing @override bool shouldRepaint(GetDrawingState getState) { - if (startPoint == null || endPoint == null) { - return false; - } + final state = getState(this); - return getState(this).contains(DrawingToolState.selected) || - getState(this).contains(DrawingToolState.hovered) || - getState(this).contains(DrawingToolState.dragging); + return state.contains(DrawingToolState.selected) || + state.contains(DrawingToolState.hovered) || + state.contains(DrawingToolState.dragging) || + state.contains(DrawingToolState.adding); } @override From 90bba13663eb0ff9873834f75caa83f33530e4f7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 21 Apr 2025 16:58:52 +0800 Subject: [PATCH 082/311] check the drawing state inside painter --- .../interactable_drawing_custom_painter.dart | 23 +++++++++++++------ .../interactable_drawing.dart | 2 -- .../line_interactable_drawing.dart | 11 --------- .../interactive_layer/interactive_layer.dart | 3 +++ 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 8a22f7933..6b385db8e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -28,6 +28,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { required this.quoteToY, required this.quoteFromY, required this.getDrawingState, + required this.drawingState, required this.epochRange, required this.quoteRange, this.animationInfo = const AnimationInfo(), @@ -36,6 +37,8 @@ class InteractableDrawingCustomPainter extends CustomPainter { /// Drawing to paint. final InteractableDrawing drawing; + final Set drawingState; + /// The main series of the chart. final DataSeries series; @@ -71,7 +74,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - // print('#### Painting ${DateTime.now()}'); + print('#### Drawing ${DateTime.now()} ${drawing.runtimeType}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, @@ -94,18 +97,24 @@ class InteractableDrawingCustomPainter extends CustomPainter { // TODO(Ramin): determine these lazily to avoid unnecessary calculations final epochRangIsChanged = oldDelegate.epochRange != epochRange; final quoteRangeIsChanged = oldDelegate.quoteRange != quoteRange; - final drawingShouldRepaint = drawing.shouldRepaint(getDrawingState); + final drawingStateIsChanged = + !_areSetsEqual(oldDelegate.drawingState, drawingState); - print('DrawingIsInRange: $drawingIsInRange, ' - // 'epochRangIsChanged: $epochRangIsChanged, ' - // 'quoteRangeIsChanged: $quoteRangeIsChanged, ' - 'drawingShouldRepaint: $drawingShouldRepaint'); + final drawingIsBeingInteracted = + drawingState.contains(DrawingToolState.dragging) || + drawingState.contains(DrawingToolState.adding); // return true; return drawingIsInRange && - (epochRangIsChanged || quoteRangeIsChanged || drawingShouldRepaint); + (drawingStateIsChanged || + epochRangIsChanged || + quoteRangeIsChanged || + drawingIsBeingInteracted); } + bool _areSetsEqual(Set a, Set b) => + a.length == b.length && a.containsAll(b); + @override bool shouldRebuildSemantics(InteractableDrawingCustomPainter oldDelegate) => false; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 9980f4b28..eb40a5675 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -132,8 +132,6 @@ abstract class InteractableDrawing GetDrawingState getDrawingState, ); - /// Returns true if the drawing tool should repaint. - bool shouldRepaint(GetDrawingState getState) => true; /// Whether this drawing is in epoch range. bool isInEpochRange(int leftEpoch, int rightEpoch) => true; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index f59c58266..d569a47f0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,6 +1,5 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/channel/channel_drawing.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -467,16 +466,6 @@ class LineInteractableDrawing @override List get props => [startPoint, endPoint]; - @override - bool shouldRepaint(GetDrawingState getState) { - final state = getState(this); - - return state.contains(DrawingToolState.selected) || - state.contains(DrawingToolState.hovered) || - state.contains(DrawingToolState.dragging) || - state.contains(DrawingToolState.adding); - } - @override bool isInEpochRange(int leftEpoch, int rightEpoch) => (startPoint?.isInViewPortRange(leftEpoch, rightEpoch) ?? true) || diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 39c78da9a..90cf2e723 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -320,6 +320,7 @@ class _InteractiveLayerGestureHandlerState foregroundPainter: InteractableDrawingCustomPainter( drawing: e, + drawingState: _interactiveState.getToolState(e), series: widget.series, theme: context.watch(), chartConfig: widget.chartConfig, @@ -346,6 +347,8 @@ class _InteractiveLayerGestureHandlerState InteractableDrawingCustomPainter( drawing: e, series: widget.series, + drawingState: + _interactiveState.getToolState(e), theme: context.watch(), chartConfig: widget.chartConfig, epochFromX: xAxis.epochFromX, From fed02126cf957df09a8eb52788da4c1281b71fcf Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 21 Apr 2025 17:58:49 +0800 Subject: [PATCH 083/311] check interacting state inside the drawing --- .../interactable_drawing_custom_painter.dart | 8 +++----- .../interactable_drawings/interactable_drawing.dart | 7 +++++++ 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 6b385db8e..f333e247e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -100,16 +100,14 @@ class InteractableDrawingCustomPainter extends CustomPainter { final drawingStateIsChanged = !_areSetsEqual(oldDelegate.drawingState, drawingState); - final drawingIsBeingInteracted = - drawingState.contains(DrawingToolState.dragging) || - drawingState.contains(DrawingToolState.adding); + final drawingNeedsRepaint = + drawing.shouldRepaint(getDrawingState, oldDelegate.drawing); - // return true; return drawingIsInRange && (drawingStateIsChanged || epochRangIsChanged || quoteRangeIsChanged || - drawingIsBeingInteracted); + drawingNeedsRepaint); } bool _areSetsEqual(Set a, Set b) => diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index eb40a5675..bf3539db5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -132,6 +132,13 @@ abstract class InteractableDrawing GetDrawingState getDrawingState, ); + /// Returns true if the drawing tool should repaint. + bool shouldRepaint( + GetDrawingState getState, + InteractableDrawing oldDrawing, + ) => + getState(this).contains(DrawingToolState.dragging) || + getState(this).contains(DrawingToolState.adding); /// Whether this drawing is in epoch range. bool isInEpochRange(int leftEpoch, int rightEpoch) => true; From a41cb5c6e5c313ac296681a03c6c574b7321cd5d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 21 Apr 2025 18:41:55 +0800 Subject: [PATCH 084/311] minor change in shouldRepaint logic --- .../interactable_drawing_custom_painter.dart | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index f333e247e..5d8ce5734 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -94,20 +94,15 @@ class InteractableDrawingCustomPainter extends CustomPainter { epochRange.rightEpoch, ); - // TODO(Ramin): determine these lazily to avoid unnecessary calculations - final epochRangIsChanged = oldDelegate.epochRange != epochRange; - final quoteRangeIsChanged = oldDelegate.quoteRange != quoteRange; - final drawingStateIsChanged = - !_areSetsEqual(oldDelegate.drawingState, drawingState); - - final drawingNeedsRepaint = - drawing.shouldRepaint(getDrawingState, oldDelegate.drawing); - return drawingIsInRange && - (drawingStateIsChanged || - epochRangIsChanged || - quoteRangeIsChanged || - drawingNeedsRepaint); + // Drawing state is changed + (!_areSetsEqual(oldDelegate.drawingState, drawingState) || + // Epoch range is changed + oldDelegate.epochRange != epochRange || + // Quote range is changed + oldDelegate.quoteRange != quoteRange || + // Drawing needs repaint + drawing.shouldRepaint(getDrawingState, oldDelegate.drawing)); } bool _areSetsEqual(Set a, Set b) => From 7db9e4c9e22cb23707e96f527b2833f7a1577c0c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 12:25:24 +0800 Subject: [PATCH 085/311] add animating state to drawing tools --- .../interactable_drawing_custom_painter.dart | 2 +- .../interactable_drawing.dart | 16 +++++++++--- .../interactive_layer/interactive_layer.dart | 26 +++++++++++-------- .../interactive_layer_base.dart | 5 ++++ .../interactive_normal_state.dart | 7 ++--- .../interactive_selected_tool_state.dart | 15 ++++++++--- 6 files changed, 50 insertions(+), 21 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 5d8ce5734..4d7304d80 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -74,7 +74,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - print('#### Drawing ${DateTime.now()} ${drawing.runtimeType}'); + // print('#### Drawing ${DateTime.now()} ${drawing.runtimeType}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index bf3539db5..c6bde3009 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -36,6 +36,12 @@ enum DrawingToolState { /// This state is active during drag operations when the user is /// modifying the tool's position. dragging, + + /// The drawing tool is being animated. + /// This state can be active, for example, when we're in the animation effect + /// of selecting or deselecting the drawing tool and the selection animation + /// is playing. + animating, } /// The class that will be generated by the drawing tool config instance when @@ -136,9 +142,13 @@ abstract class InteractableDrawing bool shouldRepaint( GetDrawingState getState, InteractableDrawing oldDrawing, - ) => - getState(this).contains(DrawingToolState.dragging) || - getState(this).contains(DrawingToolState.adding); + ) { + final Set currentState = getState(this); + + return currentState.contains(DrawingToolState.dragging) || + currentState.contains(DrawingToolState.adding) || + currentState.contains(DrawingToolState.animating); + } /// Whether this drawing is in epoch range. bool isInEpochRange(int leftEpoch, int rightEpoch) => true; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 90cf2e723..5113ad669 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -223,6 +223,10 @@ class _InteractiveLayerGestureHandlerState late AnimationController _stateChangeController; static const Curve _stateChangeCurve = Curves.easeInOut; + @override + AnimationController? get stateChangeAnimationController => + _stateChangeController; + @override void initState() { super.initState(); @@ -305,14 +309,14 @@ class _InteractiveLayerGestureHandlerState }, // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. - child: AnimatedBuilder( - animation: _stateChangeController, - builder: (_, __) { - final double animationValue = - _stateChangeCurve.transform(_stateChangeController.value); - - return RepaintBoundary( - child: Stack( + child: RepaintBoundary( + child: AnimatedBuilder( + animation: _stateChangeController, + builder: (_, __) { + final double animationValue = + _stateChangeCurve.transform(_stateChangeController.value); + + return Stack( fit: StackFit.expand, children: [ ...widget.drawings @@ -369,9 +373,9 @@ class _InteractiveLayerGestureHandlerState )) .toList(), ], - ), - ); - }), + ); + }), + ), ), ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 74169c905..3289ad5eb 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart'; +import 'package:flutter/animation.dart'; import '../chart/data_visualization/chart_data.dart'; import 'interactable_drawings/interactable_drawing.dart'; @@ -28,6 +29,10 @@ abstract class InteractiveLayerBase { /// The drawings of the interactive layer. List> get drawings; + /// The animation controller that [InteractiveLayerBase] can have to play + /// state change animations. Like selecting a drawing tool. + AnimationController? get stateChangeAnimationController; + /// Converts x to epoch. EpochFromX get epochFromX; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index 5823dfe4b..a38b19870 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -62,9 +62,10 @@ class InteractiveNormalState extends InteractiveState interactiveLayer.updateStateTo( InteractiveSelectedToolState( - selected: hitDrawing, - interactiveLayer: interactiveLayer, - ), + selected: hitDrawing, + interactiveLayer: interactiveLayer, + selectionAnimationController: + interactiveLayer.stateChangeAnimationController), StateChangeAnimationDirection.forward, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index 5a4ebfc47..cba629c0d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -27,6 +27,7 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState({ required this.selected, required super.interactiveLayer, + this.selectionAnimationController, }); /// The selected tool. @@ -37,6 +38,9 @@ class InteractiveSelectedToolState extends InteractiveState bool _draggingStartedOnTool = false; + /// The animation controller that play the selection animation. + final AnimationController? selectionAnimationController; + @override Set getToolState( InteractableDrawing drawing, @@ -47,10 +51,15 @@ class InteractiveSelectedToolState extends InteractiveState if (drawing.config.configId == selected.config.configId) { // Return dragging state if we're currently dragging the tool if (_draggingStartedOnTool) { - return hoveredState..add(DrawingToolState.dragging); + hoveredState.add(DrawingToolState.dragging); } - // Otherwise return selected state - return hoveredState..add(DrawingToolState.selected); + // Otherwise add selected state + hoveredState.add(DrawingToolState.selected); + } + + if (selectionAnimationController != null && + selectionAnimationController!.isAnimating) { + hoveredState.add(DrawingToolState.animating); } // For all other drawings, return normal state From d10470701ab06f2764824cd32cb1b4d08c06477c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 12:27:37 +0800 Subject: [PATCH 086/311] pass selection animation controller in another place as well --- .../interactive_states/interactive_adding_tool_state.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index 28715c70e..764573390 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -91,6 +91,8 @@ class InteractiveAddingToolState extends InteractiveState InteractiveSelectedToolState( selected: drawing, interactiveLayer: interactiveLayer, + selectionAnimationController: + interactiveLayer.stateChangeAnimationController, ), StateChangeAnimationDirection.forward, ); From d5859444561e75aadbef35bb3603e259695ff3f1 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 12:30:06 +0800 Subject: [PATCH 087/311] remove a redundant parameter from Selected state --- lib/src/deriv_chart/chart/main_chart.dart | 83 +++++++++---------- .../deriv_chart/chart/y_axis/quote_grid.dart | 9 ++ lib/src/deriv_chart/deriv_chart.dart | 8 +- .../interactable_drawing_custom_painter.dart | 2 +- .../interactive_adding_tool_state.dart | 2 - .../interactive_normal_state.dart | 7 +- .../interactive_selected_tool_state.dart | 8 +- lib/src/models/axis_range.dart | 15 +++- 8 files changed, 73 insertions(+), 61 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 2a2702598..0a340bdeb 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -1,10 +1,6 @@ import 'package:collection/collection.dart' show IterableExtension; -import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/add_ons/repository.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; -import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; import 'package:deriv_chart/src/models/tick.dart'; import 'package:flutter/foundation.dart' show kIsWeb; @@ -17,6 +13,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; +import '../drawing_tool_chart/drawing_tool_chart.dart'; import 'basic_chart.dart'; import 'crosshair/crosshair_area.dart'; import 'multiple_animated_builder.dart'; @@ -367,32 +364,34 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - // if (widget.drawingTools != null) - // _buildDrawingToolChart(widget.drawingTools!), if (widget.drawingTools != null) - MultipleAnimatedBuilder( - animations: [ - topBoundQuoteAnimationController, - bottomBoundQuoteAnimationController, - _yAxisNotifier, - ], - builder: (_, __) => InteractiveLayer( - drawingTools: widget.drawingTools!, - series: widget.mainSeries as DataSeries, - drawingToolsRepo: - context.watch>(), - chartConfig: context.watch(), - quoteToCanvasY: chartQuoteToCanvasY, - epochToCanvasX: xAxis.xFromEpoch, - quoteFromCanvasY: chartQuoteFromCanvasY, - epochFromCanvasX: xAxis.epochFromX, - quoteRange: QuoteRange( - topQuote: topBoundQuoteAnimationController.value, - bottomQuote: - bottomBoundQuoteAnimationController.value, - ), - ), - ), + _buildDrawingToolChart(widget.drawingTools!), + // if (widget.drawingTools != null) + // MultipleAnimatedBuilder( + // animations: [ + // topBoundQuoteAnimationController, + // bottomBoundQuoteAnimationController, + // _yAxisNotifier, + // ], + // builder: (_, __) => InteractiveLayer( + // drawingTools: widget.drawingTools!, + // series: widget.mainSeries as DataSeries, + // drawingToolsRepo: + // context.watch>(), + // chartConfig: context.watch(), + // quoteToCanvasY: chartQuoteToCanvasY, + // epochToCanvasX: xAxis.xFromEpoch, + // quoteFromCanvasY: chartQuoteFromCanvasY, + // epochFromCanvasX: xAxis.epochFromX, + // quoteRange: QuoteRange( + // topQuote: topBoundQuoteAnimationController.value, + // bottomQuote: + // bottomBoundQuoteAnimationController.value, + // topPadding: _yAxisNotifier.value.topPadding, + // bottomPadding: _yAxisNotifier.value.bottomPadding, + // ), + // ), + // ), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && @@ -419,19 +418,19 @@ class _ChartImplementationState extends BasicChartState { }, ); - // Widget _buildDrawingToolChart(DrawingTools drawingTools) => - // MultipleAnimatedBuilder( - // animations: [ - // topBoundQuoteAnimationController, - // bottomBoundQuoteAnimationController, - // ], - // builder: (_, Widget? child) => DrawingToolChart( - // series: widget.mainSeries as DataSeries, - // chartQuoteToCanvasY: chartQuoteToCanvasY, - // chartQuoteFromCanvasY: chartQuoteFromCanvasY, - // drawingTools: drawingTools, - // ), - // ); + Widget _buildDrawingToolChart(DrawingTools drawingTools) => + MultipleAnimatedBuilder( + animations: [ + topBoundQuoteAnimationController, + bottomBoundQuoteAnimationController, + ], + builder: (_, Widget? child) => DrawingToolChart( + series: widget.mainSeries as DataSeries, + chartQuoteToCanvasY: chartQuoteToCanvasY, + chartQuoteFromCanvasY: chartQuoteFromCanvasY, + drawingTools: drawingTools, + ), + ); Widget _buildLoadingAnimation() => LoadingAnimationArea( loadingRightBoundX: widget._mainSeries.input.isEmpty diff --git a/lib/src/deriv_chart/chart/y_axis/quote_grid.dart b/lib/src/deriv_chart/chart/y_axis/quote_grid.dart index 7994e221c..05d335c2d 100644 --- a/lib/src/deriv_chart/chart/y_axis/quote_grid.dart +++ b/lib/src/deriv_chart/chart/y_axis/quote_grid.dart @@ -24,6 +24,7 @@ class YAxisModel { _topPadding = topPadding, _bottomPadding = bottomPadding; + /// Initializes a model with zero values. YAxisModel.zero() : _quoteGridInterval = 0, _topBoundQuote = 0, @@ -39,6 +40,12 @@ class YAxisModel { final double _topPadding; final double _bottomPadding; + /// Top padding. + double get topPadding => _topPadding; + + /// Bottom padding. + double get bottomPadding => _bottomPadding; + /// Calculates the grid lines for a quote. List gridQuotes() { final double pixelToQuote = (_topBoundQuote - _bottomBoundQuote) / @@ -125,6 +132,8 @@ double quoteGridInterval( ); } +/// A notifier for the Y-axis model. class YAxisNotifier extends ValueNotifier { + /// Initializes a notifier for the Y-axis model. YAxisNotifier(super.value); } diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 4be20d76a..4c4833887 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -261,10 +261,10 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - _drawingTools - ..init() - ..drawingToolsRepo = _drawingToolsRepo; - // _drawingTools.drawingToolsRepo = _drawingToolsRepo; + // _drawingTools + // ..init() + // ..drawingToolsRepo = _drawingToolsRepo; + _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( context: context, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 4d7304d80..2e552315c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -37,6 +37,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { /// Drawing to paint. final InteractableDrawing drawing; + /// [drawing]'s state. final Set drawingState; /// The main series of the chart. @@ -74,7 +75,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - // print('#### Drawing ${DateTime.now()} ${drawing.runtimeType}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart index 764573390..28715c70e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart @@ -91,8 +91,6 @@ class InteractiveAddingToolState extends InteractiveState InteractiveSelectedToolState( selected: drawing, interactiveLayer: interactiveLayer, - selectionAnimationController: - interactiveLayer.stateChangeAnimationController, ), StateChangeAnimationDirection.forward, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart index a38b19870..5823dfe4b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart @@ -62,10 +62,9 @@ class InteractiveNormalState extends InteractiveState interactiveLayer.updateStateTo( InteractiveSelectedToolState( - selected: hitDrawing, - interactiveLayer: interactiveLayer, - selectionAnimationController: - interactiveLayer.stateChangeAnimationController), + selected: hitDrawing, + interactiveLayer: interactiveLayer, + ), StateChangeAnimationDirection.forward, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart index cba629c0d..2c1af73c9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart @@ -27,7 +27,6 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState({ required this.selected, required super.interactiveLayer, - this.selectionAnimationController, }); /// The selected tool. @@ -38,9 +37,6 @@ class InteractiveSelectedToolState extends InteractiveState bool _draggingStartedOnTool = false; - /// The animation controller that play the selection animation. - final AnimationController? selectionAnimationController; - @override Set getToolState( InteractableDrawing drawing, @@ -57,8 +53,8 @@ class InteractiveSelectedToolState extends InteractiveState hoveredState.add(DrawingToolState.selected); } - if (selectionAnimationController != null && - selectionAnimationController!.isAnimating) { + if (interactiveLayer.stateChangeAnimationController != null && + interactiveLayer.stateChangeAnimationController!.isAnimating) { hoveredState.add(DrawingToolState.animating); } diff --git a/lib/src/models/axis_range.dart b/lib/src/models/axis_range.dart index 00a431a78..f67bb9b20 100644 --- a/lib/src/models/axis_range.dart +++ b/lib/src/models/axis_range.dart @@ -20,7 +20,12 @@ class EpochRange with EquatableMixin { /// Can use to represent the Y-axis range of the chart. class QuoteRange with EquatableMixin { /// Initializes. - QuoteRange({required this.topQuote, required this.bottomQuote}); + QuoteRange({ + required this.topQuote, + required this.bottomQuote, + required this.topPadding, + required this.bottomPadding, + }); /// The top-most quote. final double topQuote; @@ -28,6 +33,12 @@ class QuoteRange with EquatableMixin { /// The bottom-most quote. final double bottomQuote; + /// The padding on the top of the chart. + final double topPadding; + + /// The padding on the bottom of the chart. + final double bottomPadding; + @override - List get props => [topQuote, bottomQuote]; + List get props => [topQuote, bottomQuote, topPadding, bottomPadding]; } From fba20be7bb40599f841d3e65326313b2dab36319 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 15:42:44 +0800 Subject: [PATCH 088/311] fix lint warnings --- .../drawing_tools_ui/line/line_drawing_tool_config_mobile.dart | 1 - .../drawing_tools_ui/line/line_drawing_tool_label_painter.dart | 1 - lib/src/deriv_chart/chart/bottom_chart.dart | 1 - .../drawing_tools/drawing_tool_label_painter.dart | 1 - .../drawing_tools/line/line_drawing_mobile.dart | 1 - .../data_visualization/drawing_tools/paint_drawing_label.dart | 1 - lib/src/deriv_chart/drawing_tool_chart/drawing_tool_chart.dart | 1 - lib/src/theme/chart_default_theme.dart | 1 - 8 files changed, 8 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config_mobile.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config_mobile.dart index 3d11f9e71..3fb0d50db 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config_mobile.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config_mobile.dart @@ -6,7 +6,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_ 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/data_model/point.dart'; -import 'package:deriv_chart/src/theme/colors.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_label_painter.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_label_painter.dart index 78f9b84d8..39fe7b892 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_label_painter.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_label_painter.dart @@ -1,7 +1,6 @@ import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_tool_label_painter.dart'; -import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/text_styles.dart'; import 'package:flutter/material.dart'; diff --git a/lib/src/deriv_chart/chart/bottom_chart.dart b/lib/src/deriv_chart/chart/bottom_chart.dart index ce51a6dbb..615254287 100644 --- a/lib/src/deriv_chart/chart/bottom_chart.dart +++ b/lib/src/deriv_chart/chart/bottom_chart.dart @@ -1,4 +1,3 @@ -import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/widgets/bottom_indicator_title.dart'; import 'package:flutter/material.dart'; import 'package:flutter/foundation.dart' show kIsWeb; diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_tool_label_painter.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_tool_label_painter.dart index dd0789aae..d0feb0fbe 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_tool_label_painter.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_tool_label_painter.dart @@ -1,5 +1,4 @@ import 'package:deriv_chart/deriv_chart.dart'; -import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; /// Base class for drawing tool label painter. diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing_mobile.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing_mobile.dart index 4d41be0ba..f76c5168c 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing_mobile.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/line/line_drawing_mobile.dart @@ -12,7 +12,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/line_vector_drawing_mixin.dart'; import 'package:deriv_chart/src/deriv_chart/chart/helpers/paint_functions/paint_dot.dart'; -import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/paint_drawing_label.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/paint_drawing_label.dart index a0438ef8f..f19e2fcd9 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/paint_drawing_label.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/paint_drawing_label.dart @@ -1,5 +1,4 @@ import 'package:deriv_chart/deriv_chart.dart'; -import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'dart:ui' as ui; diff --git a/lib/src/deriv_chart/drawing_tool_chart/drawing_tool_chart.dart b/lib/src/deriv_chart/drawing_tool_chart/drawing_tool_chart.dart index 49a6652d9..29abd3933 100644 --- a/lib/src/deriv_chart/drawing_tool_chart/drawing_tool_chart.dart +++ b/lib/src/deriv_chart/drawing_tool_chart/drawing_tool_chart.dart @@ -1,7 +1,6 @@ import 'package:collection/collection.dart'; import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_painter.dart'; -import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; diff --git a/lib/src/theme/chart_default_theme.dart b/lib/src/theme/chart_default_theme.dart index 19bfafcd2..2289c9693 100644 --- a/lib/src/theme/chart_default_theme.dart +++ b/lib/src/theme/chart_default_theme.dart @@ -5,7 +5,6 @@ import 'package:deriv_chart/src/theme/painting_styles/bar_style.dart'; import 'package:deriv_chart/src/theme/painting_styles/entry_spot_style.dart'; import 'package:flutter/material.dart'; -import 'colors.dart'; import 'dimens.dart'; import 'text_styles.dart'; From 98c47077d928d6f1b7e582ae90d6af8f09239313 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 16:04:26 +0800 Subject: [PATCH 089/311] remove EquatableMixin from InteractableDrawing --- .../interactable_drawings/interactable_drawing.dart | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index c6bde3009..a0ee3b1ef 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,5 +1,4 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:equatable/equatable.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -52,8 +51,7 @@ enum DrawingToolState { /// with the tools in the runtime. /// During the time that user interacts with a tool. by some debounce mechanism /// This class will update the config which is supposed to be saved in the storage. -abstract class InteractableDrawing - with EquatableMixin { +abstract class InteractableDrawing { /// Initializes [InteractableDrawing]. InteractableDrawing({required this.config}); From 024677ffa92774ed693dcea62d3b98d9a04ecf1d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 16:34:01 +0800 Subject: [PATCH 090/311] code cleanup :recycle: --- lib/src/deriv_chart/deriv_chart.dart | 8 ++++---- .../horizontal_line_interactable_drawing.dart | 3 --- .../interactable_drawings/line_interactable_drawing.dart | 3 --- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 4c4833887..4be20d76a 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -261,10 +261,10 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - // _drawingTools - // ..init() - // ..drawingToolsRepo = _drawingToolsRepo; - _drawingTools.drawingToolsRepo = _drawingToolsRepo; + _drawingTools + ..init() + ..drawingToolsRepo = _drawingToolsRepo; + // _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( context: context, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 9222a62b9..5fa44dfe9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -306,9 +306,6 @@ class HorizontalLineInteractableDrawing @override HorizontalDrawingToolConfig getUpdatedConfig() => config .copyWith(edgePoints: [if (startPoint != null) startPoint!]); - - @override - List get props => [startPoint]; } /// A circular array for dash patterns diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index d569a47f0..0d69c9e23 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -463,9 +463,6 @@ class LineInteractableDrawing if (endPoint != null) endPoint! ]); - @override - List get props => [startPoint, endPoint]; - @override bool isInEpochRange(int leftEpoch, int rightEpoch) => (startPoint?.isInViewPortRange(leftEpoch, rightEpoch) ?? true) || From a389ea7bc0b31aa50d10f5aba845321467871645 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 16:55:19 +0800 Subject: [PATCH 091/311] add a comment --- lib/src/deriv_chart/deriv_chart.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 4be20d76a..b29e8c8ef 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -264,6 +264,7 @@ class _DerivChartState extends State { _drawingTools ..init() ..drawingToolsRepo = _drawingToolsRepo; + // Comment above statement and uncomment below line, when using [InteractiveLayer] // _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( From 9cf6e91e5604035a2e31866d58b2e96a280161ee Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 22 Apr 2025 17:31:22 +0800 Subject: [PATCH 092/311] code cleanup :recycle: --- .../interaction_notifier.dart | 9 +++++++++ .../interactive_layer/interactive_layer.dart | 19 +++++++++++-------- 2 files changed, 20 insertions(+), 8 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interaction_notifier.dart diff --git a/lib/src/deriv_chart/interactive_layer/interaction_notifier.dart b/lib/src/deriv_chart/interactive_layer/interaction_notifier.dart new file mode 100644 index 000000000..d19aad24c --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interaction_notifier.dart @@ -0,0 +1,9 @@ +import 'package:flutter/foundation.dart'; + +/// Notifier class for notifying about interaction events. +class InteractionNotifier extends ChangeNotifier { + /// Notifies listeners about changes. + void notify() { + notifyListeners(); + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 5113ad669..601ac8dc0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -3,6 +3,7 @@ import 'dart:async'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/multiple_animated_builder.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -17,6 +18,7 @@ import '../chart/data_visualization/models/animation_info.dart'; import '../drawing_tool_chart/drawing_tools.dart'; import 'interactable_drawings/interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; +import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; import 'interactive_states/interactive_adding_tool_state.dart'; import 'interactive_states/interactive_normal_state.dart'; @@ -222,6 +224,7 @@ class _InteractiveLayerGestureHandlerState late InteractiveState _interactiveState; late AnimationController _stateChangeController; static const Curve _stateChangeCurve = Curves.easeInOut; + final InteractionNotifier _interactionNotifier = InteractionNotifier(); @override AnimationController? get stateChangeAnimationController => @@ -288,30 +291,30 @@ class _InteractiveLayerGestureHandlerState return MouseRegion( onHover: (event) { _interactiveState.onHover(event); - setState(() {}); + _interactionNotifier.notify(); }, child: GestureDetector( onTapUp: (details) { _interactiveState.onTap(details); - setState(() {}); + _interactionNotifier.notify(); }, onPanStart: (details) { _interactiveState.onPanStart(details); - setState(() {}); + _interactionNotifier.notify(); }, onPanUpdate: (details) { _interactiveState.onPanUpdate(details); - setState(() {}); + _interactionNotifier.notify(); }, onPanEnd: (details) { _interactiveState.onPanEnd(details); - setState(() {}); + _interactionNotifier.notify(); }, // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. child: RepaintBoundary( - child: AnimatedBuilder( - animation: _stateChangeController, + child: MultipleAnimatedBuilder( + animations: [_stateChangeController, _interactionNotifier], builder: (_, __) { final double animationValue = _stateChangeCurve.transform(_stateChangeController.value); @@ -382,7 +385,7 @@ class _InteractiveLayerGestureHandlerState void onTap(TapUpDetails details) { _interactiveState.onTap(details); - setState(() {}); + _interactionNotifier.notify(); } @override From 001f2678964067b502d5b9cd6cda5e1f460bfe0b Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 23 Apr 2025 15:25:40 +0800 Subject: [PATCH 093/311] fix: drawing positions not updated when drawing multiple at the same time --- .../interactive_layer/interactive_layer.dart | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 601ac8dc0..1120f82aa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -77,8 +77,8 @@ class InteractiveLayer extends StatefulWidget { class _InteractiveLayerState extends State { final List _interactableDrawings = []; - /// Timer for debouncing repository updates - Timer? _debounceTimer; + /// Timers for debouncing repository updates + final Map _debounceTimers = {}; /// Duration for debouncing repository updates (1-sec is a good balance) static const Duration _debounceDuration = Duration(seconds: 1); @@ -105,12 +105,20 @@ class _InteractiveLayerState extends State { } /// Updates the config in the repository with debouncing - void _updateConfigInRepository(InteractableDrawing drawing) { + void _updateConfigInRepository( + InteractableDrawing drawing, + ) { + final String? configId = drawing.config.configId; + + if (configId == null) { + return; + } + // Cancel any existing timer - _debounceTimer?.cancel(); + _debounceTimers[configId]?.cancel(); // Create a new timer - _debounceTimer = Timer(_debounceDuration, () { + _debounceTimers[configId] = Timer(_debounceDuration, () { // Only proceed if the widget is still mounted if (!mounted) { return; @@ -145,8 +153,11 @@ class _InteractiveLayerState extends State { @override void dispose() { - // Cancel the debounce timer when the widget is disposed - _debounceTimer?.cancel(); + // Cancel the debounce timers when the widget is disposed + for (final Timer timer in _debounceTimers.values) { + timer.cancel(); + } + _debounceTimers.clear(); widget.drawingToolsRepo.removeListener(_setDrawingsFromConfigs); super.dispose(); @@ -189,7 +200,7 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { final List drawings; - final Function(InteractableDrawing)? onSaveDrawingChange; + final Function(InteractableDrawing)? onSaveDrawingChange; final DrawingToolConfig Function(InteractableDrawing) onAddDrawing; From c2b287f146246c841650ec695d4ef93c6ab3375f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 23 Apr 2025 17:02:59 +0800 Subject: [PATCH 094/311] remove get state callback and get state directly --- .../interactable_drawing_custom_painter.dart | 8 ++------ .../horizontal_line_interactable_drawing.dart | 17 +++++++---------- .../interactable_drawing.dart | 13 +++++-------- .../line_interactable_drawing.dart | 18 ++++++++---------- .../interactive_layer/interactive_layer.dart | 4 ---- 5 files changed, 22 insertions(+), 38 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 2e552315c..4c43668f3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -27,7 +27,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { required this.epochToX, required this.quoteToY, required this.quoteFromY, - required this.getDrawingState, required this.drawingState, required this.epochRange, required this.quoteRange, @@ -70,9 +69,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { /// Current quote range (y-axis) of the chart; final QuoteRange quoteRange; - /// Returns `true` if the drawing tool is selected. - final Set Function(InteractableDrawing) getDrawingState; - @override void paint(Canvas canvas, Size size) { YAxisConfig.instance.yAxisClipping(canvas, size, () { @@ -82,7 +78,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { epochToX, quoteToY, animationInfo, - getDrawingState, + drawingState, ); }); } @@ -102,7 +98,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { // Quote range is changed oldDelegate.quoteRange != quoteRange || // Drawing needs repaint - drawing.shouldRepaint(getDrawingState, oldDelegate.drawing)); + drawing.shouldRepaint(drawingState, oldDelegate.drawing)); } bool _areSetsEqual(Set a, Set b) => diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 5fa44dfe9..ffae0ddd5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -80,7 +80,7 @@ class HorizontalLineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - GetDrawingState getDrawingState, + Set drawingState, ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); @@ -91,12 +91,9 @@ class HorizontalLineInteractableDrawing final Offset endOffset = Offset(size.width, quoteToY(startPoint!.quote)); // End at right edge - // Check if this drawing is selected - final Set state = getDrawingState(this); - // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = state.contains(DrawingToolState.selected) || - state.contains(DrawingToolState.dragging) + final Paint paint = drawingState.contains(DrawingToolState.selected) || + drawingState.contains(DrawingToolState.dragging) ? paintStyle.linePaintStyle( lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); @@ -104,8 +101,8 @@ class HorizontalLineInteractableDrawing canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected - if (state.contains(DrawingToolState.selected) || - state.contains(DrawingToolState.dragging)) { + if (drawingState.contains(DrawingToolState.selected) || + drawingState.contains(DrawingToolState.dragging)) { _drawPointsFocusedCircle( paintStyle, lineStyle, @@ -115,13 +112,13 @@ class HorizontalLineInteractableDrawing 3 * animationInfo.stateChangePercent, endOffset, ); - } else if (state.contains(DrawingToolState.hovered)) { + } else if (drawingState.contains(DrawingToolState.hovered)) { _drawPointsFocusedCircle( paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); } // Draw alignment guides when dragging - if (state.contains(DrawingToolState.dragging)) { + if (drawingState.contains(DrawingToolState.dragging)) { _drawAlignmentGuides(canvas, size, startOffset); } } else { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index a0ee3b1ef..07c762600 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -4,7 +4,6 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; -import '../interactable_drawing_custom_painter.dart'; /// Represents the current state of a drawing tool on the chart. /// @@ -133,19 +132,17 @@ abstract class InteractableDrawing { EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - GetDrawingState getDrawingState, + Set drawingState, ); /// Returns true if the drawing tool should repaint. bool shouldRepaint( - GetDrawingState getState, + Set drawingState, InteractableDrawing oldDrawing, ) { - final Set currentState = getState(this); - - return currentState.contains(DrawingToolState.dragging) || - currentState.contains(DrawingToolState.adding) || - currentState.contains(DrawingToolState.animating); + return drawingState.contains(DrawingToolState.dragging) || + drawingState.contains(DrawingToolState.adding) || + drawingState.contains(DrawingToolState.animating); } /// Whether this drawing is in epoch range. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 0d69c9e23..37805a8a8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -9,7 +9,6 @@ import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; -import '../interactable_drawing_custom_painter.dart'; import 'interactable_drawing.dart'; /// Interactable drawing for line drawing tool. @@ -148,12 +147,11 @@ class LineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - GetDrawingState getDrawingState, + Set drawingState, ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); // Check if this drawing is selected - final Set state = getDrawingState(this); if (startPoint != null && endPoint != null) { final Offset startOffset = @@ -162,8 +160,8 @@ class LineInteractableDrawing Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote)); // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = state.contains(DrawingToolState.selected) || - state.contains(DrawingToolState.dragging) + final Paint paint = drawingState.contains(DrawingToolState.selected) || + drawingState.contains(DrawingToolState.dragging) ? paintStyle.linePaintStyle( lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); @@ -171,8 +169,8 @@ class LineInteractableDrawing canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected - if (state.contains(DrawingToolState.selected) || - state.contains(DrawingToolState.dragging)) { + if (drawingState.contains(DrawingToolState.selected) || + drawingState.contains(DrawingToolState.dragging)) { _drawPointsFocusedCircle( paintStyle, lineStyle, @@ -182,16 +180,16 @@ class LineInteractableDrawing 3 * animationInfo.stateChangePercent, endOffset, ); - } else if (state.contains(DrawingToolState.hovered)) { + } else if (drawingState.contains(DrawingToolState.hovered)) { _drawPointsFocusedCircle( paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); } // Draw alignment guides when dragging - if (state.contains(DrawingToolState.dragging)) { + if (drawingState.contains(DrawingToolState.dragging)) { _drawAlignmentGuides(canvas, size, startOffset, endOffset, paintStyle); } - } else if (state.contains(DrawingToolState.adding)) { + } else if (drawingState.contains(DrawingToolState.adding)) { if (startPoint != null) { _drawPoint( startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 1120f82aa..5641b8128 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -351,11 +351,9 @@ class _InteractiveLayerGestureHandlerState leftEpoch: xAxis.leftBoundEpoch, ), quoteRange: widget.quoteRange, - getDrawingState: _interactiveState.getToolState, animationInfo: AnimationInfo( stateChangePercent: animationValue, ), - // onDrawingToolClicked: () => _selectedDrawing = e, ), )) .toList(), @@ -378,8 +376,6 @@ class _InteractiveLayerGestureHandlerState leftEpoch: xAxis.leftBoundEpoch, ), quoteRange: widget.quoteRange, - getDrawingState: - _interactiveState.getToolState, animationInfo: AnimationInfo( stateChangePercent: animationValue) // onDrawingToolClicked: () => _selectedDrawing = e, From be4bc6abf2bc4bb5f21dea928731f69facbe4d24 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 23 Apr 2025 17:15:39 +0800 Subject: [PATCH 095/311] chore: code cleanup :recycle: --- lib/src/deriv_chart/chart/main_chart.dart | 57 +++++++++++++---------- 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 0a340bdeb..ed4260fcf 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -1,6 +1,9 @@ import 'package:collection/collection.dart' show IterableExtension; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; import 'package:deriv_chart/src/models/tick.dart'; import 'package:flutter/foundation.dart' show kIsWeb; @@ -14,6 +17,7 @@ import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import '../drawing_tool_chart/drawing_tool_chart.dart'; +import '../interactive_layer/interactive_layer.dart'; import 'basic_chart.dart'; import 'crosshair/crosshair_area.dart'; import 'multiple_animated_builder.dart'; @@ -367,31 +371,7 @@ class _ChartImplementationState extends BasicChartState { if (widget.drawingTools != null) _buildDrawingToolChart(widget.drawingTools!), // if (widget.drawingTools != null) - // MultipleAnimatedBuilder( - // animations: [ - // topBoundQuoteAnimationController, - // bottomBoundQuoteAnimationController, - // _yAxisNotifier, - // ], - // builder: (_, __) => InteractiveLayer( - // drawingTools: widget.drawingTools!, - // series: widget.mainSeries as DataSeries, - // drawingToolsRepo: - // context.watch>(), - // chartConfig: context.watch(), - // quoteToCanvasY: chartQuoteToCanvasY, - // epochToCanvasX: xAxis.xFromEpoch, - // quoteFromCanvasY: chartQuoteFromCanvasY, - // epochFromCanvasX: xAxis.epochFromX, - // quoteRange: QuoteRange( - // topQuote: topBoundQuoteAnimationController.value, - // bottomQuote: - // bottomBoundQuoteAnimationController.value, - // topPadding: _yAxisNotifier.value.topPadding, - // bottomPadding: _yAxisNotifier.value.bottomPadding, - // ), - // ), - // ), + // _buildInteractiveLayer(context, xAxis), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && @@ -418,6 +398,33 @@ class _ChartImplementationState extends BasicChartState { }, ); + // ignore: unused_element + Widget _buildInteractiveLayer(BuildContext context, XAxisModel xAxis) { + return MultipleAnimatedBuilder( + animations: [ + topBoundQuoteAnimationController, + bottomBoundQuoteAnimationController, + _yAxisNotifier, + ], + builder: (_, __) => InteractiveLayer( + drawingTools: widget.drawingTools!, + series: widget.mainSeries as DataSeries, + drawingToolsRepo: context.watch>(), + chartConfig: context.watch(), + quoteToCanvasY: chartQuoteToCanvasY, + epochToCanvasX: xAxis.xFromEpoch, + quoteFromCanvasY: chartQuoteFromCanvasY, + epochFromCanvasX: xAxis.epochFromX, + quoteRange: QuoteRange( + topQuote: topBoundQuoteAnimationController.value, + bottomQuote: bottomBoundQuoteAnimationController.value, + topPadding: _yAxisNotifier.value.topPadding, + bottomPadding: _yAxisNotifier.value.bottomPadding, + ), + ), + ); + } + Widget _buildDrawingToolChart(DrawingTools drawingTools) => MultipleAnimatedBuilder( animations: [ From 8084e47bd01263da3ec574d8dbf393e45fdb844d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 23 Apr 2025 17:58:34 +0800 Subject: [PATCH 096/311] remove unused import --- .../horizontal_line_interactable_drawing.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index ffae0ddd5..14099205c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -8,7 +8,6 @@ import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; -import '../interactable_drawing_custom_painter.dart'; import 'interactable_drawing.dart'; /// Interactable drawing for horizontal line drawing tool. From 210649d2e5fec2f6642825fbe66c163c7af087a6 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 23 Apr 2025 18:26:37 +0800 Subject: [PATCH 097/311] override isInEpochRange inside horizontal drawing tool --- .../interactable_drawing_custom_painter.dart | 5 +---- .../horizontal_line_interactable_drawing.dart | 8 ++++++++ .../interactable_drawing.dart | 5 +++-- .../line_interactable_drawing.dart | 15 ++++++++++++--- 4 files changed, 24 insertions(+), 9 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 4c43668f3..a80d4c950 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -85,10 +85,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) { - final drawingIsInRange = drawing.isInEpochRange( - epochRange.leftEpoch, - epochRange.rightEpoch, - ); + final drawingIsInRange = drawing.isInEpochRange(epochRange); return drawingIsInRange && // Drawing state is changed diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 14099205c..fd380ab0b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -1,5 +1,7 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -302,6 +304,12 @@ class HorizontalLineInteractableDrawing @override HorizontalDrawingToolConfig getUpdatedConfig() => config .copyWith(edgePoints: [if (startPoint != null) startPoint!]); + + @override + bool isInEpochRange(EpochRange epochRange) => + // Since horizontal line is not bound to any specific epoch range, it's + // always visible no matter where is the current chart's view-port. + true; } /// A circular array for dash patterns diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 07c762600..e5420657a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -145,6 +146,6 @@ abstract class InteractableDrawing { drawingState.contains(DrawingToolState.animating); } - /// Whether this drawing is in epoch range. - bool isInEpochRange(int leftEpoch, int rightEpoch) => true; + /// Whether this drawing is in epoch range. + bool isInEpochRange(EpochRange epochRange); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 37805a8a8..3d5207b55 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,6 +1,7 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -462,9 +463,17 @@ class LineInteractableDrawing ]); @override - bool isInEpochRange(int leftEpoch, int rightEpoch) => - (startPoint?.isInViewPortRange(leftEpoch, rightEpoch) ?? true) || - (endPoint?.isInViewPortRange(leftEpoch, rightEpoch) ?? true); + bool isInEpochRange(EpochRange epochRange) => + (startPoint?.isInViewPortRange( + epochRange.leftEpoch, + epochRange.rightEpoch, + ) ?? + true) || + (endPoint?.isInViewPortRange( + epochRange.leftEpoch, + epochRange.rightEpoch, + ) ?? + true); } /// A circular array for dash patterns From 426cd7a38d88d8e31622ab1ecc58fe0194ca3978 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 23 Apr 2025 18:30:19 +0800 Subject: [PATCH 098/311] change isInEpochRange to isInViewPort to support Y-axis visibility check --- .../interactive_layer/interactable_drawing_custom_painter.dart | 2 +- .../horizontal_line_interactable_drawing.dart | 3 +-- .../interactable_drawings/interactable_drawing.dart | 2 +- .../interactable_drawings/line_interactable_drawing.dart | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index a80d4c950..b5755299d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -85,7 +85,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) { - final drawingIsInRange = drawing.isInEpochRange(epochRange); + final drawingIsInRange = drawing.isInViewPort(epochRange, quoteRange); return drawingIsInRange && // Drawing state is changed diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index fd380ab0b..418f72483 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -1,6 +1,5 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -306,7 +305,7 @@ class HorizontalLineInteractableDrawing .copyWith(edgePoints: [if (startPoint != null) startPoint!]); @override - bool isInEpochRange(EpochRange epochRange) => + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => // Since horizontal line is not bound to any specific epoch range, it's // always visible no matter where is the current chart's view-port. true; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index e5420657a..86f5fcc46 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -147,5 +147,5 @@ abstract class InteractableDrawing { } /// Whether this drawing is in epoch range. - bool isInEpochRange(EpochRange epochRange); + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 3d5207b55..f03cfcde0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -463,7 +463,7 @@ class LineInteractableDrawing ]); @override - bool isInEpochRange(EpochRange epochRange) => + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => (startPoint?.isInViewPortRange( epochRange.leftEpoch, epochRange.rightEpoch, From 649691320442f97d92df957833f76cfe2b6cbfc6 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 14:15:34 +0800 Subject: [PATCH 099/311] WIP: don't animate when series is changed --- lib/src/deriv_chart/chart/basic_chart.dart | 17 +++++- lib/src/deriv_chart/chart/bottom_chart.dart | 2 +- .../chart/bottom_chart_mobile.dart | 5 +- .../deriv_chart/chart/chart_state_mobile.dart | 2 +- .../deriv_chart/chart/chart_state_web.dart | 2 +- .../extensions/extensions.dart | 20 ++++++- .../chart/helpers/functions/conversion.dart | 2 + lib/src/deriv_chart/chart/main_chart.dart | 57 ++++++++++--------- .../deriv_chart/chart/y_axis/quote_grid.dart | 9 +++ lib/src/deriv_chart/deriv_chart.dart | 8 +-- .../interactable_drawing_custom_painter.dart | 26 ++++++--- .../horizontal_line_interactable_drawing.dart | 19 +++++-- .../line_interactable_drawing.dart | 4 +- lib/src/models/axis_range.dart | 15 +---- 14 files changed, 118 insertions(+), 70 deletions(-) diff --git a/lib/src/deriv_chart/chart/basic_chart.dart b/lib/src/deriv_chart/chart/basic_chart.dart index 1faa2a627..8ec43e874 100644 --- a/lib/src/deriv_chart/chart/basic_chart.dart +++ b/lib/src/deriv_chart/chart/basic_chart.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/deriv_chart/chart/custom_painters/chart_data_painter.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; import 'package:deriv_chart/src/deriv_chart/chart/y_axis/y_axis_config.dart'; @@ -39,7 +40,7 @@ class BasicChart extends StatefulWidget { super(key: key); /// The main series to display on the chart. - final Series mainSeries; + final DataSeries mainSeries; /// The pip size of to paint marker labels. final int pipSize; @@ -159,6 +160,14 @@ class BasicChartState extends State void didUpdateWidget(BasicChart oldWidget) { super.didUpdateWidget(oldWidget as T); + final bool isSeriesChanged = widget.mainSeries.input.isEmpty || + oldWidget.mainSeries.input.isEmpty || + widget.mainSeries.input.first != oldWidget.mainSeries.input.first; + + if (isSeriesChanged) { + _updateQuoteBoundTargets(false); + } + didUpdateChartData(oldWidget); _updateChartPosition(); } @@ -296,7 +305,7 @@ class BasicChartState extends State List getSeriesMinMaxValue() => [widget.mainSeries.minValue, widget.mainSeries.maxValue]; - void _updateQuoteBoundTargets() { + void _updateQuoteBoundTargets(bool animate) { final List minMaxValues = getSeriesMinMaxValue(); double minQuote = minMaxValues[0]; double maxQuote = minMaxValues[1]; @@ -313,6 +322,7 @@ class BasicChartState extends State bottomBoundQuoteAnimationController.animateTo( bottomBoundQuoteTarget, curve: Curves.easeOut, + duration: animate ? null : Duration.zero, ); } if (!maxQuote.isNaN && maxQuote != topBoundQuoteTarget) { @@ -320,6 +330,7 @@ class BasicChartState extends State topBoundQuoteAnimationController.animateTo( topBoundQuoteTarget, curve: Curves.easeOut, + duration: animate ? null : Duration.zero, ); } } @@ -356,7 +367,7 @@ class BasicChartState extends State ); updateVisibleData(); - _updateQuoteBoundTargets(); + _updateQuoteBoundTargets(true); final YAxisModel yAxisModel = _setupYAxisModel(canvasSize!); diff --git a/lib/src/deriv_chart/chart/bottom_chart.dart b/lib/src/deriv_chart/chart/bottom_chart.dart index 615254287..5a6e801ba 100644 --- a/lib/src/deriv_chart/chart/bottom_chart.dart +++ b/lib/src/deriv_chart/chart/bottom_chart.dart @@ -16,7 +16,7 @@ typedef SwapCallback = Function(int offset); class BottomChart extends BasicChart { /// Initializes a bottom chart. const BottomChart({ - required Series series, + required DataSeries series, required this.granularity, required this.title, int pipSize = 4, diff --git a/lib/src/deriv_chart/chart/bottom_chart_mobile.dart b/lib/src/deriv_chart/chart/bottom_chart_mobile.dart index 1a391a931..f65b9c6bd 100644 --- a/lib/src/deriv_chart/chart/bottom_chart_mobile.dart +++ b/lib/src/deriv_chart/chart/bottom_chart_mobile.dart @@ -8,14 +8,15 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'basic_chart.dart'; import 'bottom_chart.dart'; -import 'data_visualization/chart_series/series.dart'; +import 'data_visualization/chart_series/data_series.dart'; +import 'data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import 'x_axis/x_axis_model.dart'; /// Mobile version of the chart to add the bottom indicators too. class BottomChartMobile extends BasicChart { /// Initializes a bottom chart mobile. const BottomChartMobile({ - required Series series, + required DataSeries series, required this.granularity, required this.title, this.showFrame = true, diff --git a/lib/src/deriv_chart/chart/chart_state_mobile.dart b/lib/src/deriv_chart/chart/chart_state_mobile.dart index 5f6c6462a..07e15d38b 100644 --- a/lib/src/deriv_chart/chart/chart_state_mobile.dart +++ b/lib/src/deriv_chart/chart/chart_state_mobile.dart @@ -54,7 +54,7 @@ class _ChartStateMobile extends _ChartState { referenceIndexOf(widget.bottomConfigs, config); final Widget bottomChart = BottomChartMobile( - series: series, + series: series as DataSeries, isHidden: repository?.getHiddenStatus(index) ?? false, granularity: widget.granularity, pipSize: config.pipSize, diff --git a/lib/src/deriv_chart/chart/chart_state_web.dart b/lib/src/deriv_chart/chart/chart_state_web.dart index 6f2b9c19a..521b01d32 100644 --- a/lib/src/deriv_chart/chart/chart_state_web.dart +++ b/lib/src/deriv_chart/chart/chart_state_web.dart @@ -57,7 +57,7 @@ class _ChartStateWeb extends _ChartState { return Expanded( flex: isExpanded ? bottomSeries.length : 1, child: BottomChart( - series: series, + series: series as DataSeries, granularity: widget.granularity, pipSize: widget.bottomConfigs[index].pipSize, title: widget.bottomConfigs[index].title, diff --git a/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart b/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart index 0a1a868bd..0b6373ab6 100644 --- a/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart +++ b/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import '../drawing_tools/data_model/edge_point.dart'; @@ -32,7 +33,7 @@ extension DraggableEdgePointExtension on DraggableEdgePoint { /// The view port range is defined by the left and right epoch values. /// returns true if the edge point is on the view port range. bool isInViewPortRange(int leftEpoch, int rightEpoch) => - draggedEdgePoint.isInViewPortRange(leftEpoch, rightEpoch); + draggedEdgePoint.isInEpochRange(leftEpoch, rightEpoch); } /// An extension on DraggableEdgePoint class that adds some helper methods. @@ -41,10 +42,25 @@ extension EdgePointExtension on EdgePoint { /// /// The view port range is defined by the left and right epoch values. /// returns true if the edge point is on the view port range. - bool isInViewPortRange(int leftEpoch, int rightEpoch) => + bool isInEpochRange(int leftEpoch, int rightEpoch) => epoch >= (leftEpoch - getPointOffScreenBufferDistance(leftEpoch, rightEpoch)) && epoch <= (rightEpoch + getPointOffScreenBufferDistance(leftEpoch, rightEpoch)); + + /// Whether the point is in the quote range. + bool isInQuoteRange(QuoteRange quoteRange) { + final double topQuote = quoteRange.topQuote; + final double bottomQuote = quoteRange.bottomQuote; + final double quoteLengthBuffer = (topQuote - bottomQuote) / 4; + + return (quote <= (topQuote + quoteLengthBuffer)) && + (quote >= (bottomQuote - quoteLengthBuffer)); + } + + /// Whether the point is in the view port range. horizontally and vertically. + bool isInViewPortRange(EpochRange epochRange, QuoteRange quoteRange) => + isInEpochRange(epochRange.leftEpoch, epochRange.rightEpoch) || + isInQuoteRange(quoteRange); } diff --git a/lib/src/deriv_chart/chart/helpers/functions/conversion.dart b/lib/src/deriv_chart/chart/helpers/functions/conversion.dart index f9cc2392f..80831b13d 100644 --- a/lib/src/deriv_chart/chart/helpers/functions/conversion.dart +++ b/lib/src/deriv_chart/chart/helpers/functions/conversion.dart @@ -1,4 +1,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/x_axis/gaps/helpers.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/y_axis/quote_grid.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/time_range.dart'; /// Returns resulting epoch when given [epoch] is shifted by [pxShift] diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index ed4260fcf..6e8f4a7d4 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -2,6 +2,7 @@ import 'package:collection/collection.dart' show IterableExtension; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/helpers/functions/conversion.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; @@ -368,10 +369,10 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - if (widget.drawingTools != null) - _buildDrawingToolChart(widget.drawingTools!), // if (widget.drawingTools != null) - // _buildInteractiveLayer(context, xAxis), + // _buildDrawingToolChart(widget.drawingTools!), + if (widget.drawingTools != null) + _buildInteractiveLayer(context, xAxis), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && @@ -399,31 +400,31 @@ class _ChartImplementationState extends BasicChartState { ); // ignore: unused_element - Widget _buildInteractiveLayer(BuildContext context, XAxisModel xAxis) { - return MultipleAnimatedBuilder( - animations: [ - topBoundQuoteAnimationController, - bottomBoundQuoteAnimationController, - _yAxisNotifier, - ], - builder: (_, __) => InteractiveLayer( - drawingTools: widget.drawingTools!, - series: widget.mainSeries as DataSeries, - drawingToolsRepo: context.watch>(), - chartConfig: context.watch(), - quoteToCanvasY: chartQuoteToCanvasY, - epochToCanvasX: xAxis.xFromEpoch, - quoteFromCanvasY: chartQuoteFromCanvasY, - epochFromCanvasX: xAxis.epochFromX, - quoteRange: QuoteRange( - topQuote: topBoundQuoteAnimationController.value, - bottomQuote: bottomBoundQuoteAnimationController.value, - topPadding: _yAxisNotifier.value.topPadding, - bottomPadding: _yAxisNotifier.value.bottomPadding, - ), - ), - ); - } + Widget _buildInteractiveLayer(BuildContext context, XAxisModel xAxis) => + MultipleAnimatedBuilder( + animations: [ + topBoundQuoteAnimationController, + bottomBoundQuoteAnimationController, + _yAxisNotifier, + ], + builder: (_, __) { + return InteractiveLayer( + drawingTools: widget.drawingTools!, + series: widget.mainSeries as DataSeries, + drawingToolsRepo: context.watch>(), + chartConfig: context.watch(), + quoteToCanvasY: chartQuoteToCanvasY, + epochToCanvasX: xAxis.xFromEpoch, + quoteFromCanvasY: chartQuoteFromCanvasY, + epochFromCanvasX: xAxis.epochFromX, + quoteRange: QuoteRange( + topQuote: chartQuoteFromCanvasY(0), + bottomQuote: + chartQuoteFromCanvasY(_yAxisNotifier.value.canvasHeight), + ), + ); + }, + ); Widget _buildDrawingToolChart(DrawingTools drawingTools) => MultipleAnimatedBuilder( diff --git a/lib/src/deriv_chart/chart/y_axis/quote_grid.dart b/lib/src/deriv_chart/chart/y_axis/quote_grid.dart index 05d335c2d..1e1d6a3d5 100644 --- a/lib/src/deriv_chart/chart/y_axis/quote_grid.dart +++ b/lib/src/deriv_chart/chart/y_axis/quote_grid.dart @@ -46,6 +46,15 @@ class YAxisModel { /// Bottom padding. double get bottomPadding => _bottomPadding; + /// Top bound quote + double get topBoundQuote => _topBoundQuote; + + /// Bottom bound quote + double get bottomBoundQuote => _bottomBoundQuote; + + /// The height of the canvas. + double get canvasHeight => _canvasHeight; + /// Calculates the grid lines for a quote. List gridQuotes() { final double pixelToQuote = (_topBoundQuote - _bottomBoundQuote) / diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index b29e8c8ef..5181a7b36 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -261,11 +261,11 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - _drawingTools - ..init() - ..drawingToolsRepo = _drawingToolsRepo; + // _drawingTools + // ..init() + // ..drawingToolsRepo = _drawingToolsRepo; // Comment above statement and uncomment below line, when using [InteractiveLayer] - // _drawingTools.drawingToolsRepo = _drawingToolsRepo; + _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( context: context, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index b5755299d..86e780bc9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -71,6 +71,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { + // print('##### Repaint ${DateTime.now()}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, @@ -87,15 +88,22 @@ class InteractableDrawingCustomPainter extends CustomPainter { bool shouldRepaint(InteractableDrawingCustomPainter oldDelegate) { final drawingIsInRange = drawing.isInViewPort(epochRange, quoteRange); - return drawingIsInRange && - // Drawing state is changed - (!_areSetsEqual(oldDelegate.drawingState, drawingState) || - // Epoch range is changed - oldDelegate.epochRange != epochRange || - // Quote range is changed - oldDelegate.quoteRange != quoteRange || - // Drawing needs repaint - drawing.shouldRepaint(drawingState, oldDelegate.drawing)); + final bool isSeriesChanged = series.input.isEmpty || + oldDelegate.series.input.isEmpty || + series.input.first != oldDelegate.series.input.first; + + // print('##### IsSeriesChanged ${isSeriesChanged}'); + + return isSeriesChanged || + (drawingIsInRange && + // Drawing state is changed + (!_areSetsEqual(oldDelegate.drawingState, drawingState) || + // Epoch range is changed + oldDelegate.epochRange != epochRange || + // Quote range is changed + oldDelegate.quoteRange != quoteRange || + // Drawing needs repaint + drawing.shouldRepaint(drawingState, oldDelegate.drawing))); } bool _areSetsEqual(Set a, Set b) => diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 418f72483..3c1dabf87 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -1,5 +1,6 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -305,10 +306,20 @@ class HorizontalLineInteractableDrawing .copyWith(edgePoints: [if (startPoint != null) startPoint!]); @override - bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => - // Since horizontal line is not bound to any specific epoch range, it's - // always visible no matter where is the current chart's view-port. - true; + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) { + // return (startPoint?.isInEpochRange( + // epochRange.leftEpoch, + // epochRange.rightEpoch, + // ) ?? + // true) || + // (startPoint?.isInQuoteRange(quoteRange) ?? true); + + // print('##### ${startPoint?.isInQuoteRange(quoteRange)}'); + + final bool isInRange = startPoint?.isInQuoteRange(quoteRange) ?? true; + + return isInRange; + } } /// A circular array for dash patterns diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index f03cfcde0..0d7455bb7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -464,12 +464,12 @@ class LineInteractableDrawing @override bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => - (startPoint?.isInViewPortRange( + (startPoint?.isInEpochRange( epochRange.leftEpoch, epochRange.rightEpoch, ) ?? true) || - (endPoint?.isInViewPortRange( + (endPoint?.isInEpochRange( epochRange.leftEpoch, epochRange.rightEpoch, ) ?? diff --git a/lib/src/models/axis_range.dart b/lib/src/models/axis_range.dart index f67bb9b20..00a431a78 100644 --- a/lib/src/models/axis_range.dart +++ b/lib/src/models/axis_range.dart @@ -20,12 +20,7 @@ class EpochRange with EquatableMixin { /// Can use to represent the Y-axis range of the chart. class QuoteRange with EquatableMixin { /// Initializes. - QuoteRange({ - required this.topQuote, - required this.bottomQuote, - required this.topPadding, - required this.bottomPadding, - }); + QuoteRange({required this.topQuote, required this.bottomQuote}); /// The top-most quote. final double topQuote; @@ -33,12 +28,6 @@ class QuoteRange with EquatableMixin { /// The bottom-most quote. final double bottomQuote; - /// The padding on the top of the chart. - final double topPadding; - - /// The padding on the bottom of the chart. - final double bottomPadding; - @override - List get props => [topQuote, bottomQuote, topPadding, bottomPadding]; + List get props => [topQuote, bottomQuote]; } From 0a3661f6744970ad4ea376c70e30587dc1b8137c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 14:28:14 +0800 Subject: [PATCH 100/311] return for horizontal line isInViewPort --- .../horizontal_line_interactable_drawing.dart | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 3c1dabf87..e1d69e447 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -1,6 +1,5 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -306,20 +305,14 @@ class HorizontalLineInteractableDrawing .copyWith(edgePoints: [if (startPoint != null) startPoint!]); @override - bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) { - // return (startPoint?.isInEpochRange( - // epochRange.leftEpoch, - // epochRange.rightEpoch, - // ) ?? - // true) || - // (startPoint?.isInQuoteRange(quoteRange) ?? true); - - // print('##### ${startPoint?.isInQuoteRange(quoteRange)}'); - - final bool isInRange = startPoint?.isInQuoteRange(quoteRange) ?? true; - - return isInRange; - } + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => + // On X-axis range horizontal line is always visible + // TODO(NA): consider Y-axis (quoteRange) checking when finding a solution + // to clear dismiss the existing drawing, if main series is changed and the + // tool is not supposed to be visible because it's outside of view-port. + // For now it won't impact that much in terms of performance, since the + // number tools we allow to add in total is limited to a few. + true; } /// A circular array for dash patterns From 4f55b422ccb834aeaf902d3808ef0fc164fc56bf Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 14:38:26 +0800 Subject: [PATCH 101/311] do some fixes --- lib/src/deriv_chart/chart/basic_chart.dart | 17 +++-------------- lib/src/deriv_chart/chart/bottom_chart.dart | 2 +- .../deriv_chart/chart/bottom_chart_mobile.dart | 5 ++--- .../deriv_chart/chart/chart_state_mobile.dart | 2 +- lib/src/deriv_chart/chart/chart_state_web.dart | 2 +- lib/src/deriv_chart/chart/main_chart.dart | 1 - 6 files changed, 8 insertions(+), 21 deletions(-) diff --git a/lib/src/deriv_chart/chart/basic_chart.dart b/lib/src/deriv_chart/chart/basic_chart.dart index 8ec43e874..1faa2a627 100644 --- a/lib/src/deriv_chart/chart/basic_chart.dart +++ b/lib/src/deriv_chart/chart/basic_chart.dart @@ -1,4 +1,3 @@ -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/deriv_chart/chart/custom_painters/chart_data_painter.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; import 'package:deriv_chart/src/deriv_chart/chart/y_axis/y_axis_config.dart'; @@ -40,7 +39,7 @@ class BasicChart extends StatefulWidget { super(key: key); /// The main series to display on the chart. - final DataSeries mainSeries; + final Series mainSeries; /// The pip size of to paint marker labels. final int pipSize; @@ -160,14 +159,6 @@ class BasicChartState extends State void didUpdateWidget(BasicChart oldWidget) { super.didUpdateWidget(oldWidget as T); - final bool isSeriesChanged = widget.mainSeries.input.isEmpty || - oldWidget.mainSeries.input.isEmpty || - widget.mainSeries.input.first != oldWidget.mainSeries.input.first; - - if (isSeriesChanged) { - _updateQuoteBoundTargets(false); - } - didUpdateChartData(oldWidget); _updateChartPosition(); } @@ -305,7 +296,7 @@ class BasicChartState extends State List getSeriesMinMaxValue() => [widget.mainSeries.minValue, widget.mainSeries.maxValue]; - void _updateQuoteBoundTargets(bool animate) { + void _updateQuoteBoundTargets() { final List minMaxValues = getSeriesMinMaxValue(); double minQuote = minMaxValues[0]; double maxQuote = minMaxValues[1]; @@ -322,7 +313,6 @@ class BasicChartState extends State bottomBoundQuoteAnimationController.animateTo( bottomBoundQuoteTarget, curve: Curves.easeOut, - duration: animate ? null : Duration.zero, ); } if (!maxQuote.isNaN && maxQuote != topBoundQuoteTarget) { @@ -330,7 +320,6 @@ class BasicChartState extends State topBoundQuoteAnimationController.animateTo( topBoundQuoteTarget, curve: Curves.easeOut, - duration: animate ? null : Duration.zero, ); } } @@ -367,7 +356,7 @@ class BasicChartState extends State ); updateVisibleData(); - _updateQuoteBoundTargets(true); + _updateQuoteBoundTargets(); final YAxisModel yAxisModel = _setupYAxisModel(canvasSize!); diff --git a/lib/src/deriv_chart/chart/bottom_chart.dart b/lib/src/deriv_chart/chart/bottom_chart.dart index 5a6e801ba..615254287 100644 --- a/lib/src/deriv_chart/chart/bottom_chart.dart +++ b/lib/src/deriv_chart/chart/bottom_chart.dart @@ -16,7 +16,7 @@ typedef SwapCallback = Function(int offset); class BottomChart extends BasicChart { /// Initializes a bottom chart. const BottomChart({ - required DataSeries series, + required Series series, required this.granularity, required this.title, int pipSize = 4, diff --git a/lib/src/deriv_chart/chart/bottom_chart_mobile.dart b/lib/src/deriv_chart/chart/bottom_chart_mobile.dart index f65b9c6bd..1a391a931 100644 --- a/lib/src/deriv_chart/chart/bottom_chart_mobile.dart +++ b/lib/src/deriv_chart/chart/bottom_chart_mobile.dart @@ -8,15 +8,14 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'basic_chart.dart'; import 'bottom_chart.dart'; -import 'data_visualization/chart_series/data_series.dart'; -import 'data_visualization/drawing_tools/ray/ray_line_drawing.dart'; +import 'data_visualization/chart_series/series.dart'; import 'x_axis/x_axis_model.dart'; /// Mobile version of the chart to add the bottom indicators too. class BottomChartMobile extends BasicChart { /// Initializes a bottom chart mobile. const BottomChartMobile({ - required DataSeries series, + required Series series, required this.granularity, required this.title, this.showFrame = true, diff --git a/lib/src/deriv_chart/chart/chart_state_mobile.dart b/lib/src/deriv_chart/chart/chart_state_mobile.dart index 07e15d38b..5f6c6462a 100644 --- a/lib/src/deriv_chart/chart/chart_state_mobile.dart +++ b/lib/src/deriv_chart/chart/chart_state_mobile.dart @@ -54,7 +54,7 @@ class _ChartStateMobile extends _ChartState { referenceIndexOf(widget.bottomConfigs, config); final Widget bottomChart = BottomChartMobile( - series: series as DataSeries, + series: series, isHidden: repository?.getHiddenStatus(index) ?? false, granularity: widget.granularity, pipSize: config.pipSize, diff --git a/lib/src/deriv_chart/chart/chart_state_web.dart b/lib/src/deriv_chart/chart/chart_state_web.dart index 521b01d32..6f2b9c19a 100644 --- a/lib/src/deriv_chart/chart/chart_state_web.dart +++ b/lib/src/deriv_chart/chart/chart_state_web.dart @@ -57,7 +57,7 @@ class _ChartStateWeb extends _ChartState { return Expanded( flex: isExpanded ? bottomSeries.length : 1, child: BottomChart( - series: series as DataSeries, + series: series, granularity: widget.granularity, pipSize: widget.bottomConfigs[index].pipSize, title: widget.bottomConfigs[index].title, diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 6e8f4a7d4..f2aa29bfc 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -2,7 +2,6 @@ import 'package:collection/collection.dart' show IterableExtension; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/helpers/functions/conversion.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; From 61a05261ef383d8b13c4ab84aedbf83d0968eecd Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 14:40:40 +0800 Subject: [PATCH 102/311] fix some lint warnings --- lib/src/deriv_chart/chart/main_chart.dart | 6 +++--- .../interactable_drawing_custom_painter.dart | 3 --- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index f2aa29bfc..df1b6b762 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -368,10 +368,10 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - // if (widget.drawingTools != null) - // _buildDrawingToolChart(widget.drawingTools!), if (widget.drawingTools != null) - _buildInteractiveLayer(context, xAxis), + _buildDrawingToolChart(widget.drawingTools!), + // if (widget.drawingTools != null) + // _buildInteractiveLayer(context, xAxis), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 86e780bc9..4467b696a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -71,7 +71,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { - // print('##### Repaint ${DateTime.now()}'); YAxisConfig.instance.yAxisClipping(canvas, size, () { drawing.paint( canvas, @@ -92,8 +91,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { oldDelegate.series.input.isEmpty || series.input.first != oldDelegate.series.input.first; - // print('##### IsSeriesChanged ${isSeriesChanged}'); - return isSeriesChanged || (drawingIsInRange && // Drawing state is changed From 22a2d6e637b65cbd8d5b43e0052ff7206999e1ed Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 14:46:41 +0800 Subject: [PATCH 103/311] fix some lint warnings --- lib/src/deriv_chart/chart/helpers/functions/conversion.dart | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/src/deriv_chart/chart/helpers/functions/conversion.dart b/lib/src/deriv_chart/chart/helpers/functions/conversion.dart index 80831b13d..f9cc2392f 100644 --- a/lib/src/deriv_chart/chart/helpers/functions/conversion.dart +++ b/lib/src/deriv_chart/chart/helpers/functions/conversion.dart @@ -1,6 +1,4 @@ import 'package:deriv_chart/src/deriv_chart/chart/x_axis/gaps/helpers.dart'; -import 'package:deriv_chart/src/deriv_chart/chart/y_axis/quote_grid.dart'; -import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/time_range.dart'; /// Returns resulting epoch when given [epoch] is shifted by [pxShift] From b2df2ab6624314174fb7d1e255928465e7f979b9 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 15:17:14 +0800 Subject: [PATCH 104/311] chore: code cleanup --- lib/src/deriv_chart/chart/main_chart.dart | 6 +-- lib/src/deriv_chart/deriv_chart.dart | 2 +- .../enums/drawing_tool_state.dart | 36 ++++++++++++++++++ .../{ => enums}/state_change_direction.dart | 4 +- .../interactable_drawing_custom_painter.dart | 1 + .../horizontal_line_interactable_drawing.dart | 1 + .../interactable_drawing.dart | 37 +------------------ .../line_interactable_drawing.dart | 1 + .../interactive_layer/interactive_layer.dart | 9 ++--- .../interactive_layer_base.dart | 6 +-- .../interactive_adding_tool_state.dart | 3 +- .../interactive_hover_state.dart | 1 + .../interactive_normal_state.dart | 2 +- .../interactive_selected_tool_state.dart | 3 +- .../interactive_state.dart | 1 + 15 files changed, 60 insertions(+), 53 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart rename lib/src/deriv_chart/interactive_layer/{ => enums}/state_change_direction.dart (87%) rename lib/src/deriv_chart/interactive_layer/{interactive_states => interactive_layer_states}/interactive_adding_tool_state.dart (97%) rename lib/src/deriv_chart/interactive_layer/{interactive_states => interactive_layer_states}/interactive_hover_state.dart (96%) rename lib/src/deriv_chart/interactive_layer/{interactive_states => interactive_layer_states}/interactive_normal_state.dart (97%) rename lib/src/deriv_chart/interactive_layer/{interactive_states => interactive_layer_states}/interactive_selected_tool_state.dart (98%) rename lib/src/deriv_chart/interactive_layer/{interactive_states => interactive_layer_states}/interactive_state.dart (99%) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index df1b6b762..f2aa29bfc 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -368,10 +368,10 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - if (widget.drawingTools != null) - _buildDrawingToolChart(widget.drawingTools!), // if (widget.drawingTools != null) - // _buildInteractiveLayer(context, xAxis), + // _buildDrawingToolChart(widget.drawingTools!), + if (widget.drawingTools != null) + _buildInteractiveLayer(context, xAxis), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 5181a7b36..91c4bd2b3 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -265,7 +265,7 @@ class _DerivChartState extends State { // ..init() // ..drawingToolsRepo = _drawingToolsRepo; // Comment above statement and uncomment below line, when using [InteractiveLayer] - _drawingTools.drawingToolsRepo = _drawingToolsRepo; + // _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( context: context, diff --git a/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart b/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart new file mode 100644 index 000000000..38adab05d --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart @@ -0,0 +1,36 @@ +/// Represents the current state of a drawing tool on the chart. +/// +/// The state determines how the drawing tool is rendered and how it responds +/// to user interactions. Different states trigger different visual appearances +/// and interaction behaviors. +enum DrawingToolState { + /// Default state when the drawing tool is displayed on the chart + /// but not being interacted with. + normal, + + /// The drawing tool is currently selected by the user. Selected tools + /// typically show additional visual cues like handles or a glowy effect + /// to indicate they can be manipulated. + selected, + + /// The user's pointer is hovering over the drawing tool but hasn't + /// selected it yet. This state can be used to provide visual feedback + /// before selection. + hovered, + + /// The drawing tool is in the process of being created/added to the chart. + /// In this state, the tool captures user inputs (like taps) to define + /// its shape and position. + adding, + + /// The drawing tool is being actively moved or resized by the user. + /// This state is active during drag operations when the user is + /// modifying the tool's position. + dragging, + + /// The drawing tool is being animated. + /// This state can be active, for example, when we're in the animation effect + /// of selecting or deselecting the drawing tool and the selection animation + /// is playing. + animating, +} diff --git a/lib/src/deriv_chart/interactive_layer/state_change_direction.dart b/lib/src/deriv_chart/interactive_layer/enums/state_change_direction.dart similarity index 87% rename from lib/src/deriv_chart/interactive_layer/state_change_direction.dart rename to lib/src/deriv_chart/interactive_layer/enums/state_change_direction.dart index c528dee18..6f9064252 100644 --- a/lib/src/deriv_chart/interactive_layer/state_change_direction.dart +++ b/lib/src/deriv_chart/interactive_layer/enums/state_change_direction.dart @@ -1,6 +1,6 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; /// Enum to represent the direction of the [InteractiveLayer] state change /// animation. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 4467b696a..c8d34b0b4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -9,6 +9,7 @@ import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../chart/data_visualization/models/animation_info.dart'; import '../chart/y_axis/y_axis_config.dart'; +import 'enums/drawing_tool_state.dart'; /// A callback which calling it should return if the [drawing] is selected. typedef GetDrawingState = Set Function( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index e1d69e447..b62c6e759 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -9,6 +9,7 @@ import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; +import '../enums/drawing_tool_state.dart'; import 'interactable_drawing.dart'; /// Interactable drawing for horizontal line drawing tool. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 86f5fcc46..0b395b0dc 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -5,43 +5,8 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; +import '../enums/drawing_tool_state.dart'; -/// Represents the current state of a drawing tool on the chart. -/// -/// The state determines how the drawing tool is rendered and how it responds -/// to user interactions. Different states trigger different visual appearances -/// and interaction behaviors. -enum DrawingToolState { - /// Default state when the drawing tool is displayed on the chart - /// but not being interacted with. - normal, - - /// The drawing tool is currently selected by the user. Selected tools - /// typically show additional visual cues like handles or a glowy effect - /// to indicate they can be manipulated. - selected, - - /// The user's pointer is hovering over the drawing tool but hasn't - /// selected it yet. This state can be used to provide visual feedback - /// before selection. - hovered, - - /// The drawing tool is in the process of being created/added to the chart. - /// In this state, the tool captures user inputs (like taps) to define - /// its shape and position. - adding, - - /// The drawing tool is being actively moved or resized by the user. - /// This state is active during drag operations when the user is - /// modifying the tool's position. - dragging, - - /// The drawing tool is being animated. - /// This state can be active, for example, when we're in the animation effect - /// of selecting or deselecting the drawing tool and the selection animation - /// is playing. - animating, -} /// The class that will be generated by the drawing tool config instance when /// they are created or the saved ones that are loaded from storage. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 0d7455bb7..494ad14b3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -10,6 +10,7 @@ import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; +import '../enums/drawing_tool_state.dart'; import 'interactable_drawing.dart'; /// Interactable drawing for line drawing tool. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 5641b8128..afe44b61e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -20,11 +20,10 @@ import 'interactable_drawings/interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; -import 'interactive_states/interactive_adding_tool_state.dart'; -import 'interactive_states/interactive_normal_state.dart'; -import 'interactive_states/interactive_state.dart'; -import 'state_change_direction.dart'; -// ignore_for_file: public_member_api_docs +import 'interactive_layer_states/interactive_adding_tool_state.dart'; +import 'interactive_layer_states/interactive_normal_state.dart'; +import 'interactive_layer_states/interactive_state.dart'; +import 'enums/state_change_direction.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 3289ad5eb..836917f1f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -1,11 +1,11 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:flutter/animation.dart'; import '../chart/data_visualization/chart_data.dart'; import 'interactable_drawings/interactable_drawing.dart'; -import 'interactive_states/interactive_state.dart'; -import 'state_change_direction.dart'; +import 'interactive_layer_states/interactive_state.dart'; +import 'enums/state_change_direction.dart'; /// The interactive layer base class interface. abstract class InteractiveLayerBase { diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart similarity index 97% rename from lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart rename to lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 28715c70e..bab54e9e7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -1,8 +1,9 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/gestures.dart'; +import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/interactable_drawing.dart'; -import '../state_change_direction.dart'; +import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; import 'interactive_selected_tool_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart similarity index 96% rename from lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart rename to lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart index 2b23c214d..b04e724d8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_hover_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart @@ -1,6 +1,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/gestures.dart'; +import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/interactable_drawing.dart'; import 'interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart similarity index 97% rename from lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart rename to lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart index 5823dfe4b..33a468579 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart @@ -3,7 +3,7 @@ import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; import '../interactable_drawings/interactable_drawing.dart'; -import '../state_change_direction.dart'; +import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart similarity index 98% rename from lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart rename to lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 2c1af73c9..9220f68b5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -1,8 +1,9 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/widgets.dart'; +import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/interactable_drawing.dart'; -import '../state_change_direction.dart'; +import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; import 'interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart similarity index 99% rename from lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart rename to lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart index 872064bfa..c9473eb11 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart @@ -2,6 +2,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; import 'package:flutter/gestures.dart'; +import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/interactable_drawing.dart'; import '../interactive_layer_base.dart'; From d00516accd7ce6edb2d03bd860387f306fa76815 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 15:37:34 +0800 Subject: [PATCH 105/311] fix formatting --- .../interactable_drawings/interactable_drawing.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 0b395b0dc..a70be6fdc 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -7,7 +7,6 @@ import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; - /// The class that will be generated by the drawing tool config instance when /// they are created or the saved ones that are loaded from storage. /// The information from this class (its subclasses) will be used to draw the From 2ca691d2bb5e675272265718d4e7a740aa5e746a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 25 Apr 2025 15:50:49 +0800 Subject: [PATCH 106/311] revert back the usage of InteractiveLayer to use the old implementations of drawing tools --- lib/src/deriv_chart/chart/main_chart.dart | 6 +++--- lib/src/deriv_chart/deriv_chart.dart | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index f2aa29bfc..df1b6b762 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -368,10 +368,10 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - // if (widget.drawingTools != null) - // _buildDrawingToolChart(widget.drawingTools!), if (widget.drawingTools != null) - _buildInteractiveLayer(context, xAxis), + _buildDrawingToolChart(widget.drawingTools!), + // if (widget.drawingTools != null) + // _buildInteractiveLayer(context, xAxis), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 91c4bd2b3..b29e8c8ef 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -261,9 +261,9 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - // _drawingTools - // ..init() - // ..drawingToolsRepo = _drawingToolsRepo; + _drawingTools + ..init() + ..drawingToolsRepo = _drawingToolsRepo; // Comment above statement and uncomment below line, when using [InteractiveLayer] // _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); From ade5fd4d267ce92a1a1664fbe2852900b72dc73f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 28 Apr 2025 11:09:21 +0800 Subject: [PATCH 107/311] add a comment --- lib/src/deriv_chart/interactive_layer/interactive_layer.dart | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index afe44b61e..910135f13 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -77,6 +77,11 @@ class _InteractiveLayerState extends State { final List _interactableDrawings = []; /// Timers for debouncing repository updates + /// + /// We use a map to have one timer per each drawing tool config. This is + /// because the request to update the config of different tools can come at + /// the same time. If we use only one timer a new request from a different + /// tool will cancel the previous one. final Map _debounceTimers = {}; /// Duration for debouncing repository updates (1-sec is a good balance) From 0c236a0338aff16c1a4194880be847c5e62f3bb4 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 28 Apr 2025 11:12:09 +0800 Subject: [PATCH 108/311] rename state normal to idle --- .../deriv_chart/interactive_layer/enums/drawing_tool_state.dart | 2 +- .../interactive_layer_states/interactive_adding_tool_state.dart | 2 +- .../interactive_layer_states/interactive_hover_state.dart | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart b/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart index 38adab05d..738c18c8c 100644 --- a/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart @@ -6,7 +6,7 @@ enum DrawingToolState { /// Default state when the drawing tool is displayed on the chart /// but not being interacted with. - normal, + idle, /// The drawing tool is currently selected by the user. Selected tools /// typically show additional visual cues like handles or a glowy effect diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index bab54e9e7..ce81d7f3f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -55,7 +55,7 @@ class InteractiveAddingToolState extends InteractiveState ) => drawing.config.configId == addingTool.configId ? {DrawingToolState.adding} - : {DrawingToolState.normal}; + : {DrawingToolState.idle}; @override void onPanEnd(DragEndDetails details) {} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart index b04e724d8..569b76386 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart @@ -18,7 +18,7 @@ mixin InteractiveHoverState on InteractiveState { ) => drawing == _hoveredTool ? {DrawingToolState.hovered} - : {DrawingToolState.normal}; + : {DrawingToolState.idle}; @override void onHover(PointerHoverEvent event) { From b19205abc409975541a59415ab4845ff61e5279d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 28 Apr 2025 11:15:25 +0800 Subject: [PATCH 109/311] chore: code cleanup :recycle: --- .../chart/data_visualization/extensions/extensions.dart | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart b/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart index 0b6373ab6..dfc9425e0 100644 --- a/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart +++ b/lib/src/deriv_chart/chart/data_visualization/extensions/extensions.dart @@ -26,6 +26,10 @@ import '../drawing_tools/data_model/edge_point.dart'; double getPointOffScreenBufferDistance(int leftEpoch, int rightEpoch) => (rightEpoch - leftEpoch) / 4; +/// Similar to [getPointOffScreenBufferDistance], but for the quote range. +double getQuoteBufferDistance(double topQuote, double bottomQuote) => + (topQuote - bottomQuote) / 4; + /// An extension on DraggableEdgePoint class that adds some helper methods. extension DraggableEdgePointExtension on DraggableEdgePoint { /// Checks if the edge point is on the view port range. @@ -53,7 +57,8 @@ extension EdgePointExtension on EdgePoint { bool isInQuoteRange(QuoteRange quoteRange) { final double topQuote = quoteRange.topQuote; final double bottomQuote = quoteRange.bottomQuote; - final double quoteLengthBuffer = (topQuote - bottomQuote) / 4; + final double quoteLengthBuffer = + getQuoteBufferDistance(topQuote, bottomQuote); return (quote <= (topQuote + quoteLengthBuffer)) && (quote >= (bottomQuote - quoteLengthBuffer)); From 8f84884491d7232c7da64cacd1534ed60682d4bb Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 28 Apr 2025 11:30:06 +0800 Subject: [PATCH 110/311] use setEquals instead of a custom helper function --- .../interactable_drawing_custom_painter.dart | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index c8d34b0b4..ef8de93d8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -3,6 +3,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawi import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; import '../chart/data_visualization/chart_series/data_series.dart'; @@ -95,7 +96,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { return isSeriesChanged || (drawingIsInRange && // Drawing state is changed - (!_areSetsEqual(oldDelegate.drawingState, drawingState) || + (!setEquals(oldDelegate.drawingState, drawingState) || // Epoch range is changed oldDelegate.epochRange != epochRange || // Quote range is changed @@ -104,9 +105,6 @@ class InteractableDrawingCustomPainter extends CustomPainter { drawing.shouldRepaint(drawingState, oldDelegate.drawing))); } - bool _areSetsEqual(Set a, Set b) => - a.length == b.length && a.containsAll(b); - @override bool shouldRebuildSemantics(InteractableDrawingCustomPainter oldDelegate) => false; From 5152feea5fd378e1c861e76c2a678e54fcbd7189 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 28 Apr 2025 11:45:31 +0800 Subject: [PATCH 111/311] code cleanup :recycle: --- .../interactable_drawings/interactable_drawing.dart | 4 ++++ .../interactable_drawings/line_interactable_drawing.dart | 7 ------- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index a70be6fdc..a3c482209 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -64,6 +64,10 @@ abstract class InteractableDrawing { /// Each drawing will know how to handle and update itself accordingly based /// on where the dragging position is like if it's dragging a point or a line /// of the tool. + /// + /// The drawing tools will update its properties based on the dragging at + /// runtime. Saving the new updates to a persistent storage is not the + /// responsibility of this method. void onDragUpdate( DragUpdateDetails details, EpochFromX epochFromX, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 494ad14b3..ae99d783a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -435,13 +435,6 @@ class LineInteractableDrawing quote: newEndQuote, ); } - - // Note: The actual config update should be handled by the InteractiveLayer - // which has access to the Repository. This method only updates the local - // startPoint and endPoint properties, which will be reflected in the drawing. - // - // The InteractiveLayer should periodically check if the selected drawing's - // points have changed and update the config in the repository accordingly. } @override From cfeb5cde641c8595c4abd924952a1e57fb3173c7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 28 Apr 2025 11:56:09 +0800 Subject: [PATCH 112/311] don't show drawing tools when input is empty and chart is in loading state --- .../interactive_layer/interactive_layer.dart | 74 ++++++++++--------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 910135f13..6e157b532 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -336,39 +336,17 @@ class _InteractiveLayerGestureHandlerState return Stack( fit: StackFit.expand, - children: [ - ...widget.drawings - .map((e) => CustomPaint( - foregroundPainter: - InteractableDrawingCustomPainter( - drawing: e, - drawingState: _interactiveState.getToolState(e), - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - epochRange: EpochRange( - rightEpoch: xAxis.rightBoundEpoch, - leftEpoch: xAxis.leftBoundEpoch, - ), - quoteRange: widget.quoteRange, - animationInfo: AnimationInfo( - stateChangePercent: animationValue, - ), - ), - )) - .toList(), - ..._interactiveState.previewDrawings - .map((e) => CustomPaint( - foregroundPainter: - InteractableDrawingCustomPainter( + children: widget.series.input.isEmpty + ? [] + : [ + ...widget.drawings + .map((e) => CustomPaint( + foregroundPainter: + InteractableDrawingCustomPainter( drawing: e, - series: widget.series, drawingState: _interactiveState.getToolState(e), + series: widget.series, theme: context.watch(), chartConfig: widget.chartConfig, epochFromX: xAxis.epochFromX, @@ -381,12 +359,38 @@ class _InteractiveLayerGestureHandlerState ), quoteRange: widget.quoteRange, animationInfo: AnimationInfo( - stateChangePercent: animationValue) - // onDrawingToolClicked: () => _selectedDrawing = e, + stateChangePercent: animationValue, ), - )) - .toList(), - ], + ), + )) + .toList(), + ..._interactiveState.previewDrawings + .map((e) => CustomPaint( + foregroundPainter: + InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + drawingState: _interactiveState + .getToolState(e), + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + epochRange: EpochRange( + rightEpoch: xAxis.rightBoundEpoch, + leftEpoch: xAxis.leftBoundEpoch, + ), + quoteRange: widget.quoteRange, + animationInfo: AnimationInfo( + stateChangePercent: + animationValue) + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), + ], ); }), ), From 0e69c80f5e4f712859c3bb12b363bbb006c5fbf6 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 7 May 2025 14:50:57 +0800 Subject: [PATCH 113/311] feat: add InteractiveLayerBahaviour --- lib/src/deriv_chart/chart/main_chart.dart | 11 +- lib/src/deriv_chart/deriv_chart.dart | 8 +- .../interactive_layer/interactive_layer.dart | 75 +++++++------ .../interactive_layer_base.dart | 101 +++++++++++++++++- .../interactive_adding_tool_state.dart | 6 +- .../interactive_normal_state.dart | 14 +-- .../interactive_selected_tool_state.dart | 16 +-- .../interactive_state.dart | 7 +- 8 files changed, 174 insertions(+), 64 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index df1b6b762..5b52e142c 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -2,6 +2,7 @@ import 'package:collection/collection.dart' show IterableExtension; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; @@ -159,6 +160,9 @@ class _ChartImplementationState extends BasicChartState { final YAxisNotifier _yAxisNotifier = YAxisNotifier(YAxisModel.zero()); + final InteractiveLayerBehaviour interactiveLayerBehaviour = + InteractiveLayerMobileBehaviour(); + @override double get verticalPadding { if (canvasSize == null) { @@ -368,10 +372,10 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - if (widget.drawingTools != null) - _buildDrawingToolChart(widget.drawingTools!), // if (widget.drawingTools != null) - // _buildInteractiveLayer(context, xAxis), + // _buildDrawingToolChart(widget.drawingTools!), + if (widget.drawingTools != null) + _buildInteractiveLayer(context, xAxis), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && @@ -421,6 +425,7 @@ class _ChartImplementationState extends BasicChartState { bottomQuote: chartQuoteFromCanvasY(_yAxisNotifier.value.canvasHeight), ), + interactiveLayerBehaviour: interactiveLayerBehaviour, ); }, ); diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index b29e8c8ef..5181a7b36 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -261,11 +261,11 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - _drawingTools - ..init() - ..drawingToolsRepo = _drawingToolsRepo; + // _drawingTools + // ..init() + // ..drawingToolsRepo = _drawingToolsRepo; // Comment above statement and uncomment below line, when using [InteractiveLayer] - // _drawingTools.drawingToolsRepo = _drawingToolsRepo; + _drawingTools.drawingToolsRepo = _drawingToolsRepo; }); showDialog( context: context, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 6e157b532..7c3de1e90 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -20,9 +20,6 @@ import 'interactable_drawings/interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; -import 'interactive_layer_states/interactive_adding_tool_state.dart'; -import 'interactive_layer_states/interactive_normal_state.dart'; -import 'interactive_layer_states/interactive_state.dart'; import 'enums/state_change_direction.dart'; /// Interactive layer of the chart package where elements can be drawn and can @@ -39,9 +36,12 @@ class InteractiveLayer extends StatefulWidget { required this.epochFromCanvasX, required this.drawingToolsRepo, required this.quoteRange, + required this.interactiveLayerBehaviour, super.key, }); + final InteractiveLayerBehaviour interactiveLayerBehaviour; + /// Drawing tools. final DrawingTools drawingTools; @@ -179,6 +179,7 @@ class _InteractiveLayerState extends State { chartConfig: widget.chartConfig, addingDrawingTool: widget.drawingTools.selectedDrawingTool, quoteRange: widget.quoteRange, + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, onClearAddingDrawingTool: widget.drawingTools.clearDrawingToolSelection, onSaveDrawingChange: _updateConfigInRepository, onAddDrawing: _addDrawingToRepo, @@ -198,12 +199,15 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { required this.onClearAddingDrawingTool, required this.onAddDrawing, required this.quoteRange, + required this.interactiveLayerBehaviour, this.addingDrawingTool, this.onSaveDrawingChange, }); final List drawings; + final InteractiveLayerBehaviour interactiveLayerBehaviour; + final Function(InteractableDrawing)? onSaveDrawingChange; final DrawingToolConfig Function(InteractableDrawing) onAddDrawing; @@ -236,7 +240,6 @@ class _InteractiveLayerGestureHandlerState implements InteractiveLayerBase { // InteractableDrawing? _selectedDrawing; - late InteractiveState _interactiveState; late AnimationController _stateChangeController; static const Curve _stateChangeCurve = Curves.easeInOut; final InteractionNotifier _interactionNotifier = InteractionNotifier(); @@ -249,7 +252,10 @@ class _InteractiveLayerGestureHandlerState void initState() { super.initState(); - _interactiveState = InteractiveNormalState(interactiveLayer: this); + widget.interactiveLayerBehaviour.init( + interactiveLayer: this, + onUpdate: () => setState(() {}), + ); _stateChangeController = AnimationController( vsync: this, @@ -266,29 +272,28 @@ class _InteractiveLayerGestureHandlerState if (widget.addingDrawingTool != null && widget.addingDrawingTool != oldWidget.addingDrawingTool) { - updateStateTo( - InteractiveAddingToolState( - widget.addingDrawingTool!, - interactiveLayer: this, - ), - StateChangeAnimationDirection.forward, - ); + widget.interactiveLayerBehaviour + .onAddDrawingTool(widget.addingDrawingTool!); + // updateStateTo( + // InteractiveAddingToolState( + // widget.addingDrawingTool!, + // interactiveLayer: this, + // ), + // StateChangeAnimationDirection.forward, + // ); } } @override - Future updateStateTo( - InteractiveState state, - StateChangeAnimationDirection direction, { - bool waitForAnimation = false, - }) async { - if (waitForAnimation) { - await _runAnimation(direction); - setState(() => _interactiveState = state); - } else { - unawaited(_runAnimation(direction)); - setState(() => _interactiveState = state); - } + Future animateStateChange(StateChangeAnimationDirection direction) async { + await _runAnimation(direction); + // if (waitForAnimation) { + // await _runAnimation(direction); + // setState(() => _interactiveState = state); + // } else { + // unawaited(_runAnimation(direction)); + // setState(() => _interactiveState = state); + // } } Future _runAnimation(StateChangeAnimationDirection direction) async { @@ -305,24 +310,24 @@ class _InteractiveLayerGestureHandlerState final XAxisModel xAxis = context.watch(); return MouseRegion( onHover: (event) { - _interactiveState.onHover(event); + widget.interactiveLayerBehaviour.onHover(event); _interactionNotifier.notify(); }, child: GestureDetector( onTapUp: (details) { - _interactiveState.onTap(details); + widget.interactiveLayerBehaviour.onTap(details); _interactionNotifier.notify(); }, onPanStart: (details) { - _interactiveState.onPanStart(details); + widget.interactiveLayerBehaviour.onPanStart(details); _interactionNotifier.notify(); }, onPanUpdate: (details) { - _interactiveState.onPanUpdate(details); + widget.interactiveLayerBehaviour.onPanUpdate(details); _interactionNotifier.notify(); }, onPanEnd: (details) { - _interactiveState.onPanEnd(details); + widget.interactiveLayerBehaviour.onPanEnd(details); _interactionNotifier.notify(); }, // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement @@ -344,8 +349,9 @@ class _InteractiveLayerGestureHandlerState foregroundPainter: InteractableDrawingCustomPainter( drawing: e, - drawingState: - _interactiveState.getToolState(e), + drawingState: widget + .interactiveLayerBehaviour + .getToolState(e), series: widget.series, theme: context.watch(), chartConfig: widget.chartConfig, @@ -364,13 +370,14 @@ class _InteractiveLayerGestureHandlerState ), )) .toList(), - ..._interactiveState.previewDrawings + ...widget.interactiveLayerBehaviour.previewDrawings .map((e) => CustomPaint( foregroundPainter: InteractableDrawingCustomPainter( drawing: e, series: widget.series, - drawingState: _interactiveState + drawingState: widget + .interactiveLayerBehaviour .getToolState(e), theme: context.watch(), chartConfig: widget.chartConfig, @@ -399,7 +406,7 @@ class _InteractiveLayerGestureHandlerState } void onTap(TapUpDetails details) { - _interactiveState.onTap(details); + widget.interactiveLayerBehaviour.onTap(details); _interactionNotifier.notify(); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 836917f1f..d60c0191e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -1,9 +1,15 @@ +import 'dart:async'; + import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:flutter/animation.dart'; +import 'package:flutter/gestures.dart'; import '../chart/data_visualization/chart_data.dart'; +import 'enums/drawing_tool_state.dart'; import 'interactable_drawings/interactable_drawing.dart'; +import 'interactive_layer_states/interactive_adding_tool_state.dart'; +import 'interactive_layer_states/interactive_normal_state.dart'; import 'interactive_layer_states/interactive_state.dart'; import 'enums/state_change_direction.dart'; @@ -20,11 +26,7 @@ abstract class InteractiveLayerBase { /// The [waitForAnimation] defines if interactive layer should wait for the /// animation to finish before changing to the new state or should change /// to the new state right away. - void updateStateTo( - InteractiveState state, - StateChangeAnimationDirection direction, { - bool waitForAnimation = false, - }); + Future animateStateChange(StateChangeAnimationDirection direction); /// The drawings of the interactive layer. List> get drawings; @@ -56,3 +58,92 @@ abstract class InteractiveLayerBase { /// repository. void onSaveDrawing(InteractableDrawing drawing); } + +/// The base class for managing the interactive layer. +abstract class InteractiveLayerBehaviour { + late InteractiveState _interactiveState; + + /// Initializes the interactive layer manager. + void init({ + required InteractiveLayerBase interactiveLayer, + required VoidCallback onUpdate, + }) { + this.interactiveLayer = interactiveLayer; + this.onUpdate = onUpdate; + _interactiveState = InteractiveNormalState(interactiveLayerBehaviour: this); + } + + /// Updates the interactive layer state to the new state. + Future updateStateTo( + InteractiveState newState, + StateChangeAnimationDirection direction, { + bool waitForAnimation = false, + }) async { + if (waitForAnimation) { + await interactiveLayer.animateStateChange(direction); + + _interactiveState = newState; + onUpdate(); + } else { + unawaited(interactiveLayer.animateStateChange(direction)); + + _interactiveState = newState; + onUpdate(); + } + } + + /// Handles the addition of a drawing tool. + void onAddDrawingTool(DrawingToolConfig drawingTool) { + updateStateTo( + InteractiveAddingToolState(drawingTool, interactiveLayerBehaviour: this), + StateChangeAnimationDirection.forward, + ); + } + + /// The interactive layer that this manager is managing. + late final InteractiveLayerBase interactiveLayer; + + /// The callback that is called when the interactive layer needs to be + late final VoidCallback onUpdate; + + /// The drawings of the interactive layer. + Set getToolState( + InteractableDrawing drawing, + ) => + _interactiveState.getToolState(drawing); + + /// The drawings of the interactive layer. + List> get previewDrawings => + _interactiveState.previewDrawings; + + /// Handles tap event. + void onTap(TapUpDetails details) { + _interactiveState.onTap(details); + } + + /// Handles pan update event. + void onPanUpdate(DragUpdateDetails details) { + _interactiveState.onPanUpdate(details); + } + + /// Handles pan end event. + void onPanEnd(DragEndDetails details) { + _interactiveState.onPanEnd(details); + } + + /// Handles pan start event. + void onPanStart(DragStartDetails details) { + _interactiveState.onPanStart(details); + } + + /// Handles hover event. + void onHover(PointerHoverEvent event) { + _interactiveState.onHover(event); + } +} + +/// The mobile-specific implementation of the interactive layer behaviour. +class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour {} + +/// The Desktop-specific implementation of the interactive layer behaviour. +class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour {} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index ce81d7f3f..7e2ce6458 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -28,7 +28,7 @@ class InteractiveAddingToolState extends InteractiveState /// access to the layer's methods and properties. InteractiveAddingToolState( this.addingTool, { - required super.interactiveLayer, + required super.interactiveLayerBehaviour, }) { _addingDrawing ??= addingTool.getInteractableDrawing(); } @@ -88,10 +88,10 @@ class InteractiveAddingToolState extends InteractiveState for (final drawing in interactiveLayer.drawings) { if (drawing.config.configId == addedConfig.configId) { - interactiveLayer.updateStateTo( + interactiveLayerBehaviour.updateStateTo( InteractiveSelectedToolState( selected: drawing, - interactiveLayer: interactiveLayer, + interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart index 33a468579..8375b907b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart @@ -22,7 +22,7 @@ class InteractiveNormalState extends InteractiveState /// /// The [interactiveLayer] parameter is passed to the superclass and provides /// access to the layer's methods and properties. - InteractiveNormalState({required super.interactiveLayer}); + InteractiveNormalState({required super.interactiveLayerBehaviour}); @override void onPanEnd(DragEndDetails details) {} @@ -38,11 +38,13 @@ class InteractiveNormalState extends InteractiveState final InteractiveState newState = InteractiveSelectedToolState( selected: hitDrawing, - interactiveLayer: interactiveLayer, + interactiveLayerBehaviour: interactiveLayerBehaviour, ); - interactiveLayer.updateStateTo( - newState, StateChangeAnimationDirection.forward); + interactiveLayerBehaviour.updateStateTo( + newState, + StateChangeAnimationDirection.forward, + ); newState.onPanStart(details); } @@ -60,10 +62,10 @@ class InteractiveNormalState extends InteractiveState return; } - interactiveLayer.updateStateTo( + interactiveLayerBehaviour.updateStateTo( InteractiveSelectedToolState( selected: hitDrawing, - interactiveLayer: interactiveLayer, + interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 9220f68b5..27d71d505 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/widgets.dart'; +import 'package:meta/dart2js.dart'; import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/interactable_drawing.dart'; @@ -27,7 +28,7 @@ class InteractiveSelectedToolState extends InteractiveState /// access to the layer's methods and properties. InteractiveSelectedToolState({ required this.selected, - required super.interactiveLayer, + required super.interactiveLayerBehaviour, }); /// The selected tool. @@ -82,10 +83,10 @@ class InteractiveSelectedToolState extends InteractiveState // If a tool is selected, but user starts dragging on another tool // Switch the selected tool if (hitDrawing != null) { - interactiveLayer.updateStateTo( + interactiveLayerBehaviour.updateStateTo( InteractiveSelectedToolState( selected: hitDrawing, - interactiveLayer: interactiveLayer, + interactiveLayerBehaviour: interactiveLayerBehaviour, )..onPanStart(details), StateChangeAnimationDirection.forward, ); @@ -116,17 +117,18 @@ class InteractiveSelectedToolState extends InteractiveState if (hitDrawing != null) { // when a tool is tap/hit, keep selected state. it might be the same // tool or a different tool. - interactiveLayer.updateStateTo( + interactiveLayerBehaviour.updateStateTo( InteractiveSelectedToolState( selected: hitDrawing, - interactiveLayer: interactiveLayer, + interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, ); } else { // If tap is on empty space, return to normal state. - interactiveLayer.updateStateTo( - InteractiveNormalState(interactiveLayer: interactiveLayer), + interactiveLayerBehaviour.updateStateTo( + InteractiveNormalState( + interactiveLayerBehaviour: interactiveLayerBehaviour), StateChangeAnimationDirection.backward, waitForAnimation: true, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart index c9473eb11..7da84f816 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart @@ -25,7 +25,7 @@ abstract class InteractiveState { /// The [interactiveLayer] parameter provides a reference to the layer that owns /// this state, allowing the state to call methods on the layer such as updating /// to a new state or adding/saving drawings. - InteractiveState({required this.interactiveLayer}); + InteractiveState({required this.interactiveLayerBehaviour}); /// Returns the state of the drawing tool. /// @@ -50,7 +50,10 @@ abstract class InteractiveState { /// /// A reference to the layer that owns this state, allowing the state to /// access layer properties and methods. - final InteractiveLayerBase interactiveLayer; + final InteractiveLayerBehaviour interactiveLayerBehaviour; + + InteractiveLayerBase get interactiveLayer => + interactiveLayerBehaviour.interactiveLayer; /// Converts x coordinate (in pixels) to epoch timestamp. /// From 32f05cb7a178f41e43ac3db4ef9634295f961762 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 7 May 2025 23:08:16 +0800 Subject: [PATCH 114/311] move first point when adding the line tool --- .../line_interactable_drawing.dart | 51 +++++++++++++++++++ .../interactive_layer_base.dart | 16 +++++- .../interactive_adding_tool_state.dart | 14 ++++- .../interactive_selected_tool_state.dart | 1 - 4 files changed, 79 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index ae99d783a..89ff4d24f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -51,6 +51,19 @@ class LineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, ) { + if (startPoint != null && endPoint == null) { + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + // Check if the drag is starting on the start point + if ((details.localPosition - startOffset).distance <= hitTestMargin) { + _isDraggingStartPoint = true; + return; + } + } + if (startPoint == null || endPoint == null) { return; } @@ -90,6 +103,16 @@ class LineInteractableDrawing @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (startPoint != null) { + final startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + if ((offset - startOffset).distance <= hitTestMargin) { + return true; + } + } if (startPoint == null || endPoint == null) { return false; } @@ -365,6 +388,34 @@ class LineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, ) { + if (startPoint != null && + endPoint == null && + (Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ) - + details.localPosition) + .distance < + hitTestMargin) { + // If we're dragging the start point, we need to update its position + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + // Apply the delta to get the new screen position + final Offset newOffset = startOffset + details.delta; + + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Update the start point + startPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + } if (startPoint == null || endPoint == null) { return; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index d60c0191e..6fffc3ee7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -143,7 +143,21 @@ abstract class InteractiveLayerBehaviour { } /// The mobile-specific implementation of the interactive layer behaviour. -class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour {} +class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { + @override + void onAddDrawingTool(DrawingToolConfig drawingTool) { + final newState = InteractiveAddingToolState(drawingTool, + interactiveLayerBehaviour: this); + + newState.onTap(TapUpDetails( + kind: PointerDeviceKind.touch, localPosition: Offset(100, 100))); + + updateStateTo( + newState, + StateChangeAnimationDirection.forward, + ); + } +} /// The Desktop-specific implementation of the interactive layer behaviour. class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour {} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 7e2ce6458..a2134f5c8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -64,7 +64,19 @@ class InteractiveAddingToolState extends InteractiveState void onPanStart(DragStartDetails details) {} @override - void onPanUpdate(DragUpdateDetails details) {} + void onPanUpdate(DragUpdateDetails details) { + if (_addingDrawing != null) { + if (_addingDrawing!.hitTest(details.localPosition, epochToX, quoteToY)) { + _addingDrawing!.onDragUpdate( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); + } + } + } @override void onHover(PointerHoverEvent event) { diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 27d71d505..1115509a4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -1,6 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/widgets.dart'; -import 'package:meta/dart2js.dart'; import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/interactable_drawing.dart'; From c4ae7f5606993a460eff6c7acdd1dd7f6e4fec26 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 8 May 2025 15:22:52 +0800 Subject: [PATCH 115/311] line preview in mobile --- .../line_series/oscillator_line_painter.dart | 2 + .../interactable_drawing.dart | 7 + .../line_interactable_drawing.dart | 245 ++++++++++++++++++ .../interactive_layer/interactive_layer.dart | 2 + .../interactive_layer_base.dart | 2 +- .../interactive_adding_tool_state.dart | 16 +- 6 files changed, 272 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart b/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart index fbd6b085f..4ff2cdf97 100644 --- a/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart +++ b/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart @@ -1,3 +1,5 @@ +import 'dart:ui'; + import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/helpers/combine_paths.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/chart/helpers/functions/helper_functions.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index a3c482209..e5c2bb438 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -116,4 +117,10 @@ abstract class InteractableDrawing { /// Whether this drawing is in epoch range. bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange); + + /// Returns back the [InteractableDrawing] instance of this drawing tool + InteractableDrawing getAddingPreview( + InteractiveLayerBehaviour layerBehaviour) { + throw UnimplementedError('getAddingPreview() is not implemented.'); + } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 89ff4d24f..25ff3d3d0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,6 +1,8 @@ import 'dart:ui' as ui; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -519,6 +521,20 @@ class LineInteractableDrawing epochRange.rightEpoch, ) ?? true); + + @override + InteractableDrawing getAddingPreview( + InteractiveLayerBehaviour layerBehaviour, + ) { + if (layerBehaviour is InteractiveLayerMobileBehaviour) { + return LineAddingPreviewMobile( + config: config, + startPoint: startPoint, + endPoint: endPoint, + ); + } + return this; + } } /// A circular array for dash patterns @@ -535,3 +551,232 @@ class _CircularIntervalList { return _values[_index++]; } } + +class LineAddingPreviewMobile extends LineInteractableDrawing { + /// Initializes [LineInteractableDrawing]. + LineAddingPreviewMobile({ + required super.config, + required super.startPoint, + required super.endPoint, + }); + + // Tracks which point is being dragged, if any + // null: dragging the whole line + // true: dragging the start point + // false: dragging the end point + bool? _isDraggingStartPoint; + + Offset? _hoverPosition; + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + + @override + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (startPoint != null && endPoint == null) { + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + // Check if the drag is starting on the start point + if ((details.localPosition - startOffset).distance <= hitTestMargin) { + _isDraggingStartPoint = true; + return; + } + } + } + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (startPoint != null && endPoint == null) { + final startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + if ((offset - startOffset).distance <= hitTestMargin) { + return true; + } + } else if (endPoint != null) { + final endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + if ((offset - endOffset).distance <= hitTestMargin) { + return true; + } + } + return false; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ) { + final LineStyle lineStyle = config.lineStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + // Check if this drawing is selected + + if (startPoint != null && endPoint == null) { + _drawPoint( + startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); + _drawPointAlignmentGuides(canvas, size, + Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote))); + } else if (startPoint != null && endPoint != null) { + _drawPoint(endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); + _drawPointAlignmentGuides(canvas, size, + Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote))); + final startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Use glowy paint style if selected, otherwise use normal paint style + final Paint paint = drawingState.contains(DrawingToolState.selected) || + drawingState.contains(DrawingToolState.dragging) + ? paintStyle.linePaintStyle( + lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) + : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); + canvas.drawLine(startOffset, endOffset, paint); + } + } + + void _drawPointsFocusedCircle( + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ui.Canvas canvas, + ui.Offset startOffset, + double outerCircleRadius, + double innerCircleRadius, + ui.Offset endOffset) { + final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); + final glowyPaintStyle = + paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); + canvas + ..drawCircle( + startOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + startOffset, + innerCircleRadius, + normalPaintStyle, + ) + ..drawCircle( + endOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + endOffset, + innerCircleRadius, + normalPaintStyle, + ); + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + if (startPoint == null) { + startPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + } else if (startPoint != null && endPoint == null) { + endPoint = EdgePoint( + epoch: epochFromX(200), + quote: quoteFromY(200), + ); + } else if (startPoint != null && endPoint != null) { + onDone(); + } + } + + @override + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (startPoint != null && endPoint == null) { + // If we're dragging the start point, we need to update its position + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + // Apply the delta to get the new screen position + final Offset newOffset = startOffset + details.delta; + + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Update the start point + startPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + } else if (endPoint != null) { + // If we're dragging the start point, we need to update its position + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Apply the delta to get the new screen position + final Offset newOffset = endOffset + details.delta; + + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Update the start point + endPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + } + } + + @override + void onDragEnd( + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + // Reset the dragging flag when drag is complete + _isDraggingStartPoint = null; + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 7c3de1e90..3a8cbf0d4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -270,6 +270,8 @@ class _InteractiveLayerGestureHandlerState void didUpdateWidget(covariant _InteractiveLayerGestureHandler oldWidget) { super.didUpdateWidget(oldWidget); + print('### Old ${oldWidget.drawings.length} new: ${widget.drawings.length}'); + if (widget.addingDrawingTool != null && widget.addingDrawingTool != oldWidget.addingDrawingTool) { widget.interactiveLayerBehaviour diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 6fffc3ee7..fa22d0a8e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -146,7 +146,7 @@ abstract class InteractiveLayerBehaviour { class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { @override void onAddDrawingTool(DrawingToolConfig drawingTool) { - final newState = InteractiveAddingToolState(drawingTool, + final newState = InteractiveAddingToolStateMobile(drawingTool, interactiveLayerBehaviour: this); newState.onTap(TapUpDetails( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index a2134f5c8..d20446f30 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -30,7 +30,9 @@ class InteractiveAddingToolState extends InteractiveState this.addingTool, { required super.interactiveLayerBehaviour, }) { - _addingDrawing ??= addingTool.getInteractableDrawing(); + _addingDrawing ??= addingTool + .getInteractableDrawing() + .getAddingPreview(interactiveLayerBehaviour); } /// The tool being added. @@ -113,3 +115,15 @@ class InteractiveAddingToolState extends InteractiveState }); } } + +class InteractiveAddingToolStateMobile extends InteractiveAddingToolState { + InteractiveAddingToolStateMobile(super.addingTool, + {required super.interactiveLayerBehaviour}); + + @override + void onTap(TapUpDetails details) { + if (!_addingDrawing!.hitTest(details.localPosition, epochToX, quoteToY)) { + super.onTap(details); + } + } +} From fb099bf032a74082a07d8f57741a39ff9b7be083 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 8 May 2025 15:48:43 +0800 Subject: [PATCH 116/311] default value for interactive layer behavour --- lib/src/deriv_chart/chart/chart.dart | 5 ++ .../deriv_chart/chart/chart_state_mobile.dart | 1 + .../deriv_chart/chart/chart_state_web.dart | 1 + lib/src/deriv_chart/chart/main_chart.dart | 13 +++- .../line_interactable_drawing.dart | 62 +------------------ 5 files changed, 19 insertions(+), 63 deletions(-) diff --git a/lib/src/deriv_chart/chart/chart.dart b/lib/src/deriv_chart/chart/chart.dart index 6db596977..e9aed942f 100644 --- a/lib/src/deriv_chart/chart/chart.dart +++ b/lib/src/deriv_chart/chart/chart.dart @@ -2,6 +2,7 @@ import 'package:collection/collection.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; import 'package:deriv_chart/src/deriv_chart/chart/mobile_chart_frame_dividers.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/theme/dimens.dart'; import 'package:flutter/foundation.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; @@ -43,6 +44,7 @@ class Chart extends StatefulWidget { const Chart({ required this.mainSeries, required this.granularity, + this.interactiveLayerBehaviour, this.drawingTools, this.pipSize = 4, this.controller, @@ -185,6 +187,9 @@ class Chart extends StatefulWidget { /// Chart's indicators final Repository? indicatorsRepo; + /// The interactive layer behaviour. + final InteractiveLayerBehaviour? interactiveLayerBehaviour; + @override State createState() => // TODO(Ramin): Make this customizable from outside. diff --git a/lib/src/deriv_chart/chart/chart_state_mobile.dart b/lib/src/deriv_chart/chart/chart_state_mobile.dart index 5f6c6462a..3e902f2f7 100644 --- a/lib/src/deriv_chart/chart/chart_state_mobile.dart +++ b/lib/src/deriv_chart/chart/chart_state_mobile.dart @@ -141,6 +141,7 @@ class _ChartStateMobile extends _ChartState { quoteBoundsAnimationDuration: quoteBoundsAnimationDuration, showCurrentTickBlinkAnimation: widget.showCurrentTickBlinkAnimation ?? true, + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, ), Align( alignment: Alignment.topLeft, diff --git a/lib/src/deriv_chart/chart/chart_state_web.dart b/lib/src/deriv_chart/chart/chart_state_web.dart index 6f2b9c19a..7784e5e3d 100644 --- a/lib/src/deriv_chart/chart/chart_state_web.dart +++ b/lib/src/deriv_chart/chart/chart_state_web.dart @@ -46,6 +46,7 @@ class _ChartStateWeb extends _ChartState { quoteBoundsAnimationDuration: quoteBoundsAnimationDuration, showCurrentTickBlinkAnimation: widget.showCurrentTickBlinkAnimation ?? true, + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, ), ), if (bottomSeries?.isNotEmpty ?? false) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 5b52e142c..49cd55e08 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -63,6 +63,7 @@ class MainChart extends BasicChart { double opacity = 1, ChartAxisConfig? chartAxisConfig, VisibleQuoteAreaChangedCallback? onQuoteAreaChanged, + this.interactiveLayerBehaviour, this.showCrosshair = false, }) : _mainSeries = mainSeries, chartDataList = [ @@ -133,6 +134,10 @@ class MainChart extends BasicChart { /// Whether to show current tick blink animation or not. final bool showCurrentTickBlinkAnimation; + /// Defines the interactive layer behaviour. like when adding a tools or + /// dragging/hovering. + final InteractiveLayerBehaviour? interactiveLayerBehaviour; + @override _ChartImplementationState createState() => _ChartImplementationState(); } @@ -160,8 +165,7 @@ class _ChartImplementationState extends BasicChartState { final YAxisNotifier _yAxisNotifier = YAxisNotifier(YAxisModel.zero()); - final InteractiveLayerBehaviour interactiveLayerBehaviour = - InteractiveLayerMobileBehaviour(); + late final InteractiveLayerBehaviour _interactiveLayerBehaviour; @override double get verticalPadding { @@ -186,6 +190,9 @@ class _ChartImplementationState extends BasicChartState { void initState() { super.initState(); + _interactiveLayerBehaviour = + widget.interactiveLayerBehaviour ?? InteractiveLayerMobileBehaviour(); + if (widget.verticalPaddingFraction != null) { verticalPaddingFraction = widget.verticalPaddingFraction!; } @@ -425,7 +432,7 @@ class _ChartImplementationState extends BasicChartState { bottomQuote: chartQuoteFromCanvasY(_yAxisNotifier.value.canvasHeight), ), - interactiveLayerBehaviour: interactiveLayerBehaviour, + interactiveLayerBehaviour: _interactiveLayerBehaviour, ); }, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 25ff3d3d0..c0563843f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -552,6 +552,8 @@ class _CircularIntervalList { } } +/// A Line interactable just for the preview of the line when we're adding the +/// line tool on mobile. class LineAddingPreviewMobile extends LineInteractableDrawing { /// Initializes [LineInteractableDrawing]. LineAddingPreviewMobile({ @@ -560,20 +562,6 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { required super.endPoint, }); - // Tracks which point is being dragged, if any - // null: dragging the whole line - // true: dragging the start point - // false: dragging the end point - bool? _isDraggingStartPoint; - - Offset? _hoverPosition; - - @override - void onHover(PointerHoverEvent event, EpochFromX epochFromX, - QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { - _hoverPosition = event.localPosition; - } - @override void onDragStart( DragStartDetails details, @@ -661,40 +649,6 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { } } - void _drawPointsFocusedCircle( - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ui.Canvas canvas, - ui.Offset startOffset, - double outerCircleRadius, - double innerCircleRadius, - ui.Offset endOffset) { - final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); - final glowyPaintStyle = - paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); - canvas - ..drawCircle( - startOffset, - outerCircleRadius, - glowyPaintStyle, - ) - ..drawCircle( - startOffset, - innerCircleRadius, - normalPaintStyle, - ) - ..drawCircle( - endOffset, - outerCircleRadius, - glowyPaintStyle, - ) - ..drawCircle( - endOffset, - innerCircleRadius, - normalPaintStyle, - ); - } - @override void onCreateTap( TapUpDetails details, @@ -767,16 +721,4 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { ); } } - - @override - void onDragEnd( - DragEndDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { - // Reset the dragging flag when drag is complete - _isDraggingStartPoint = null; - } } From e71f251a07561979232eaeb1c1ac0cab09c7498d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 8 May 2025 16:49:26 +0800 Subject: [PATCH 117/311] show alignment cross-hair when adding a tool in desktop --- lib/src/deriv_chart/chart/main_chart.dart | 2 +- .../horizontal_line_interactable_drawing.dart | 10 +- .../interactive_layer/interactive_layer.dart | 2 - .../interactive_layer_base.dart | 22 +- .../interactive_adding_tool_state.dart | 192 +++++++++++++++++- 5 files changed, 213 insertions(+), 15 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 49cd55e08..1b39cc46c 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -191,7 +191,7 @@ class _ChartImplementationState extends BasicChartState { super.initState(); _interactiveLayerBehaviour = - widget.interactiveLayerBehaviour ?? InteractiveLayerMobileBehaviour(); + widget.interactiveLayerBehaviour ?? InteractiveLayerDesktopBehaviour(); if (widget.verticalPaddingFraction != null) { verticalPaddingFraction = widget.verticalPaddingFraction!; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index b62c6e759..463e8356f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -191,7 +191,7 @@ class HorizontalLineInteractableDrawing // Draw the dashed line canvas.drawPath( _dashPath(horizontalPath, - dashArray: _CircularIntervalList([5, 5])), + dashArray: CircularIntervalList([5, 5])), guidesPaint, ); } @@ -199,7 +199,7 @@ class HorizontalLineInteractableDrawing /// Creates a dashed path from a regular path Path _dashPath( Path source, { - required _CircularIntervalList dashArray, + required CircularIntervalList dashArray, }) { final Path dest = Path(); for (final ui.PathMetric metric in source.computeMetrics()) { @@ -235,7 +235,7 @@ class HorizontalLineInteractableDrawing // Draw the dashed line canvas.drawPath( _dashPath(horizontalPath, - dashArray: _CircularIntervalList([5, 5])), + dashArray: CircularIntervalList([5, 5])), guidesPaint, ); } @@ -317,8 +317,8 @@ class HorizontalLineInteractableDrawing } /// A circular array for dash patterns -class _CircularIntervalList { - _CircularIntervalList(this._values); +class CircularIntervalList { + CircularIntervalList(this._values); final List _values; int _index = 0; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 3a8cbf0d4..7c3de1e90 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -270,8 +270,6 @@ class _InteractiveLayerGestureHandlerState void didUpdateWidget(covariant _InteractiveLayerGestureHandler oldWidget) { super.didUpdateWidget(oldWidget); - print('### Old ${oldWidget.drawings.length} new: ${widget.drawings.length}'); - if (widget.addingDrawingTool != null && widget.addingDrawingTool != oldWidget.addingDrawingTool) { widget.interactiveLayerBehaviour diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index fa22d0a8e..8a1caa9d8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -147,10 +147,11 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { @override void onAddDrawingTool(DrawingToolConfig drawingTool) { final newState = InteractiveAddingToolStateMobile(drawingTool, - interactiveLayerBehaviour: this); - - newState.onTap(TapUpDetails( - kind: PointerDeviceKind.touch, localPosition: Offset(100, 100))); + interactiveLayerBehaviour: this) + ..onTap(TapUpDetails( + kind: PointerDeviceKind.touch, + localPosition: const Offset(100, 100), + )); updateStateTo( newState, @@ -160,4 +161,15 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { } /// The Desktop-specific implementation of the interactive layer behaviour. -class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour {} +class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour { + @override + void onAddDrawingTool(DrawingToolConfig drawingTool) { + updateStateTo( + InteractiveAddingToolStateDesktop( + drawingTool, + interactiveLayerBehaviour: this, + ), + StateChangeAnimationDirection.forward, + ); + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index d20446f30..3043f6420 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -1,4 +1,17 @@ +import 'dart:ui'; + +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.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_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/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; @@ -116,9 +129,13 @@ class InteractiveAddingToolState extends InteractiveState } } +/// The mobile-specific implementation of the interactive adding tool state. class InteractiveAddingToolStateMobile extends InteractiveAddingToolState { - InteractiveAddingToolStateMobile(super.addingTool, - {required super.interactiveLayerBehaviour}); + /// Adding tool state for mobile devices. + InteractiveAddingToolStateMobile( + super.addingTool, { + required super.interactiveLayerBehaviour, + }); @override void onTap(TapUpDetails details) { @@ -127,3 +144,174 @@ class InteractiveAddingToolStateMobile extends InteractiveAddingToolState { } } } + +/// The desktop-specific implementation of the interactive adding tool state. +class InteractiveAddingToolStateDesktop + extends InteractiveAddingToolStateMobile { + /// Initializes the state with the interactive layer and the [addingTool]. + InteractiveAddingToolStateDesktop( + super.addingTool, { + required super.interactiveLayerBehaviour, + }); + + final AddingToolAlignmentCrossHair _crossHair = + AddingToolAlignmentCrossHair(); + + @override + List> get previewDrawings => + [...super.previewDrawings, _crossHair]; + + @override + void onHover(PointerHoverEvent event) { + super.onHover(event); + _crossHair.onHover(event, epochFromX, quoteFromY, epochToX, quoteToY); + } +} + +// TODO(NA): make an interface above InteractableDrawing that this class can +// also implement, so it won't need to have a config instance. +/// A cross-hair used for aligning the adding tool. +class AddingToolAlignmentCrossHair + extends InteractableDrawing { + /// + AddingToolAlignmentCrossHair() : super(config: _config); + + Offset? _currentHoverPosition; + + static final _config = CrosshairTempConfig( + configId: '', + drawingData: DrawingData(id: '', drawingParts: []), + edgePoints: const [], + ); + + @override + CrosshairTempConfig get config => _config; + + @override + InteractableDrawing getAddingPreview( + InteractiveLayerBehaviour layerBehaviour) { + return this; + } + + @override + CrosshairTempConfig getUpdatedConfig() { + return config; + } + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + return false; + } + + @override + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) { + return true; + } + + @override + void onDragUpdate(DragUpdateDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _currentHoverPosition = event.localPosition; + } + + @override + void paint(Canvas canvas, Size size, EpochToX epochToX, QuoteToY quoteToY, + AnimationInfo animationInfo, Set drawingState) { + if (_currentHoverPosition == null) { + return; + } + _drawPointAlignmentGuides(canvas, size, _currentHoverPosition!); + } + + /// Draws alignment guides (horizontal and vertical lines) for a single point + void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { + // Create a dashed paint style for the alignment guides + final Paint guidesPaint = Paint() + ..color = const Color(0x80FFFFFF) // Semi-transparent white + ..strokeWidth = 1.0 + ..style = PaintingStyle.stroke; + + // Create paths for horizontal and vertical guides + final Path horizontalPath = Path(); + final Path verticalPath = Path(); + + // Draw horizontal and vertical guides from the point + horizontalPath + ..moveTo(0, pointOffset.dy) + ..lineTo(size.width, pointOffset.dy); + + verticalPath + ..moveTo(pointOffset.dx, 0) + ..lineTo(pointOffset.dx, size.height); + + // Draw the dashed lines + canvas + ..drawPath( + _dashPath(horizontalPath, + dashArray: CircularIntervalList([5, 5])), + guidesPaint, + ) + ..drawPath( + _dashPath(verticalPath, + dashArray: CircularIntervalList([5, 5])), + guidesPaint, + ); + } + + Path _dashPath( + Path source, { + required CircularIntervalList dashArray, + }) { + final Path dest = Path(); + for (final PathMetric metric in source.computeMetrics()) { + double distance = 0; + bool draw = true; + while (distance < metric.length) { + final double len = dashArray.next; + if (draw) { + dest.addPath( + metric.extractPath(distance, distance + len), + Offset.zero, + ); + } + distance += len; + draw = !draw; + } + } + return dest; + } +} + +class CrosshairTempConfig extends DrawingToolConfig { + CrosshairTempConfig({ + required super.configId, + required super.drawingData, + required super.edgePoints, + }); + + @override + DrawingToolConfig copyWith({ + String? configId, + DrawingData? drawingData, + LineStyle? lineStyle, + LineStyle? fillStyle, + DrawingPatterns? pattern, + List? edgePoints, + bool? enableLabel, + int? number, + }) => + this; + + @override + DrawingToolItem getItem( + UpdateDrawingTool updateDrawingTool, VoidCallback deleteDrawingTool) { + throw UnimplementedError(); + } + + @override + Map toJson() => {}; +} From 67d92c9e4c051860e99eec7f6191c1792c8e3048 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 8 May 2025 16:54:03 +0800 Subject: [PATCH 118/311] code cleanup :recycle: --- .../interactive_adding_tool_state.dart | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 3043f6420..926b7819b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -172,20 +172,20 @@ class InteractiveAddingToolStateDesktop // also implement, so it won't need to have a config instance. /// A cross-hair used for aligning the adding tool. class AddingToolAlignmentCrossHair - extends InteractableDrawing { - /// + extends InteractableDrawing { + /// Initializes the cross-hair with a configuration. AddingToolAlignmentCrossHair() : super(config: _config); Offset? _currentHoverPosition; - static final _config = CrosshairTempConfig( + static final _config = AlignmentCrossHairConfig( configId: '', drawingData: DrawingData(id: '', drawingParts: []), edgePoints: const [], ); @override - CrosshairTempConfig get config => _config; + AlignmentCrossHairConfig get config => _config; @override InteractableDrawing getAddingPreview( @@ -194,7 +194,7 @@ class AddingToolAlignmentCrossHair } @override - CrosshairTempConfig getUpdatedConfig() { + AlignmentCrossHairConfig getUpdatedConfig() { return config; } @@ -286,8 +286,10 @@ class AddingToolAlignmentCrossHair } } -class CrosshairTempConfig extends DrawingToolConfig { - CrosshairTempConfig({ +/// A temporary configuration class for the cross-hair used in the adding tool. +class AlignmentCrossHairConfig extends DrawingToolConfig { + /// Initializes the cross-hair configuration. + const AlignmentCrossHairConfig({ required super.configId, required super.drawingData, required super.edgePoints, From e086356c213caace61469118926a8f989f7acb4b Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 8 May 2025 16:55:24 +0800 Subject: [PATCH 119/311] code cleanup :recycle: --- lib/src/deriv_chart/deriv_chart.dart | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 5181a7b36..0d63ed0f0 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -12,6 +12,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_serie import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/markers/marker_series.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_object.dart'; import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/misc/callbacks.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; @@ -19,6 +20,7 @@ import 'package:deriv_chart/src/misc/extensions.dart'; import 'package:deriv_chart/src/models/tick.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:deriv_chart/src/widgets/animated_popup.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:shared_preferences/shared_preferences.dart'; @@ -185,6 +187,10 @@ class _DerivChartState extends State { final DrawingTools _drawingTools = DrawingTools(); + final InteractiveLayerBehaviour _interactiveLayerBehaviour = kIsWeb + ? InteractiveLayerDesktopBehaviour() + : InteractiveLayerMobileBehaviour(); + @override void initState() { super.initState(); @@ -355,6 +361,7 @@ class _DerivChartState extends State { showScrollToLastTickButton: widget.showScrollToLastTickButton, loadingAnimationColor: widget.loadingAnimationColor, chartAxisConfig: widget.chartAxisConfig, + interactiveLayerBehaviour: _interactiveLayerBehaviour, ), if (widget.indicatorsRepo == null) _buildIndicatorsIcon(), if (widget.drawingToolsRepo == null) _buildDrawingToolsIcon(), From 6caaf180c5968dd1f63dd7d9ae33973135b264a2 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 10:15:55 +0800 Subject: [PATCH 120/311] use polymorphism to get the prevew line according to the current behaviour: --- .../horizontal_line_interactable_drawing.dart | 2 ++ .../interactable_drawing.dart | 24 +++++++++++++++---- .../line_interactable_drawing.dart | 12 ++++------ .../interactive_layer_base.dart | 16 +++++++++++++ .../interactive_adding_tool_state.dart | 11 ++------- 5 files changed, 43 insertions(+), 22 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 463e8356f..8e7cc46d8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -318,11 +318,13 @@ class HorizontalLineInteractableDrawing /// A circular array for dash patterns class CircularIntervalList { + /// Initializes [CircularIntervalList]. CircularIntervalList(this._values); final List _values; int _index = 0; + /// Returns the next value in the circular list. T get next { if (_index >= _values.length) { _index = 0; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index e5c2bb438..8239fb2d2 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -118,9 +118,23 @@ abstract class InteractableDrawing { /// Whether this drawing is in epoch range. bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange); - /// Returns back the [InteractableDrawing] instance of this drawing tool - InteractableDrawing getAddingPreview( - InteractiveLayerBehaviour layerBehaviour) { - throw UnimplementedError('getAddingPreview() is not implemented.'); - } + /// Returns back the [InteractableDrawing] which is used for showing the + /// preview of the tool when we're on [InteractiveLayerMobileBehaviour]. + /// + /// Override this method if you want to show a different preview for mobile + /// other than the default one. + InteractableDrawing getAddingPreviewForMobileBehaviour( + InteractiveLayerMobileBehaviour layerBehaviour, + ) => + this; + + /// Returns back the [InteractableDrawing] which is used for showing the + /// preview of the tool when we're on [InteractiveLayerDesktopBehaviour]. + /// + /// Override this method if you want to show a different preview for desktop + /// other than the default one. + InteractableDrawing getAddingPreviewForDesktopBehaviour( + InteractiveLayerDesktopBehaviour layerBehaviour, + ) => + this; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index c0563843f..824dfb3b1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -523,18 +523,14 @@ class LineInteractableDrawing true); @override - InteractableDrawing getAddingPreview( - InteractiveLayerBehaviour layerBehaviour, - ) { - if (layerBehaviour is InteractiveLayerMobileBehaviour) { - return LineAddingPreviewMobile( + InteractableDrawing getAddingPreviewForMobileBehaviour( + InteractiveLayerMobileBehaviour layerBehaviour, + ) => + LineAddingPreviewMobile( config: config, startPoint: startPoint, endPoint: endPoint, ); - } - return this; - } } /// A circular array for dash patterns diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 8a1caa9d8..ded8519f9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -73,6 +73,10 @@ abstract class InteractiveLayerBehaviour { _interactiveState = InteractiveNormalState(interactiveLayerBehaviour: this); } + /// Return the adding preview of the [drawing] we're currently adding for this + /// Behaviour. + InteractableDrawing getAddingDrawingPreview(InteractableDrawing drawing); + /// Updates the interactive layer state to the new state. Future updateStateTo( InteractiveState newState, @@ -158,6 +162,12 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { StateChangeAnimationDirection.forward, ); } + + @override + InteractableDrawing getAddingDrawingPreview( + InteractableDrawing drawing, + ) => + drawing.getAddingPreviewForMobileBehaviour(this); } /// The Desktop-specific implementation of the interactive layer behaviour. @@ -172,4 +182,10 @@ class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour { StateChangeAnimationDirection.forward, ); } + + @override + InteractableDrawing getAddingDrawingPreview( + InteractableDrawing drawing, + ) => + drawing.getAddingPreviewForDesktopBehaviour(this); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 926b7819b..f5b2f570e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -43,9 +43,8 @@ class InteractiveAddingToolState extends InteractiveState this.addingTool, { required super.interactiveLayerBehaviour, }) { - _addingDrawing ??= addingTool - .getInteractableDrawing() - .getAddingPreview(interactiveLayerBehaviour); + _addingDrawing ??= interactiveLayerBehaviour + .getAddingDrawingPreview(addingTool.getInteractableDrawing()); } /// The tool being added. @@ -187,12 +186,6 @@ class AddingToolAlignmentCrossHair @override AlignmentCrossHairConfig get config => _config; - @override - InteractableDrawing getAddingPreview( - InteractiveLayerBehaviour layerBehaviour) { - return this; - } - @override AlignmentCrossHairConfig getUpdatedConfig() { return config; From b564d5c78c26b6826a0d7603220f5dbfb0552fa7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 10:16:21 +0800 Subject: [PATCH 121/311] code cleanup :recycle: --- .../interactive_layer_states/interactive_adding_tool_state.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index f5b2f570e..d7bd2ab46 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -9,7 +9,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; From 4273e11061645af49ccd27f705e9d38c278411a7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 10:38:44 +0800 Subject: [PATCH 122/311] remove doing tap in mobile adding state --- .../interactable_drawings/interactable_drawing.dart | 7 +++++-- .../interactive_layer/interactive_layer_base.dart | 10 ++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 8239fb2d2..cccb208b6 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -40,7 +40,10 @@ abstract class InteractableDrawing { /// the drawing can use the tap to capture and create the coordinates required /// for its shape. /// - /// [onDone] is a callback that should be called when the drawing is done. + /// [onDone] is a callback that should be called when the drawing is done + /// adding. each drawing tool will know when it's done adding. For example + /// a line tool will be done when the user taps on the second point of the + /// line or for horizontal line tool when the user taps one time. void onCreateTap( TapUpDetails details, EpochFromX epochFromX, @@ -75,7 +78,7 @@ abstract class InteractableDrawing { QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - ); + ) {} /// Called when the drawing tool dragging is ended. void onDragEnd( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index ded8519f9..466cd7a98 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -150,12 +150,10 @@ abstract class InteractiveLayerBehaviour { class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { @override void onAddDrawingTool(DrawingToolConfig drawingTool) { - final newState = InteractiveAddingToolStateMobile(drawingTool, - interactiveLayerBehaviour: this) - ..onTap(TapUpDetails( - kind: PointerDeviceKind.touch, - localPosition: const Offset(100, 100), - )); + final newState = InteractiveAddingToolStateMobile( + drawingTool, + interactiveLayerBehaviour: this, + ); updateStateTo( newState, From 1e541ec41b4cb8311152d5992064256c5e49ea51 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 11:46:28 +0800 Subject: [PATCH 123/311] WIP: making preview lines separate classes --- .../interactable_drawing_custom_painter.dart | 3 +- .../drawing_adding_preview.dart | 79 ++++++++ .../interactable_drawings/drawing_v2.dart | 109 ++++++++++ .../horizontal_line_interactable_drawing.dart | 51 +++++ .../interactable_drawing.dart | 35 ++-- .../line_interactable_drawing.dart | 191 +++++++++++++----- .../interactive_layer/interactive_layer.dart | 3 +- .../interactive_layer_base.dart | 15 +- .../interactive_adding_tool_state.dart | 58 +++--- .../interactive_hover_state.dart | 5 +- .../interactive_selected_tool_state.dart | 7 +- .../interactive_state.dart | 7 +- 12 files changed, 455 insertions(+), 108 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index ef8de93d8..1addd40a8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,4 +1,5 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -36,7 +37,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { }); /// Drawing to paint. - final InteractableDrawing drawing; + final DrawingV2 drawing; /// [drawing]'s state. final Set drawingState; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart new file mode 100644 index 000000000..cbdf33c16 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -0,0 +1,79 @@ +import 'package:deriv_chart/deriv_chart.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/gestures.dart'; + +import '../enums/drawing_tool_state.dart'; + +/// The base class for drawing previews. +abstract class DrawingAddingPreview< + T extends InteractableDrawing> implements DrawingV2 { + /// Initializes the [DrawingAddingPreview]. + DrawingAddingPreview({ + required this.interactiveLayerBehaviour, + required this.interactableDrawing, + }); + + /// + final InteractiveLayerBehaviour interactiveLayerBehaviour; + + /// The config of the drawing tool that is going to be added. + final T interactableDrawing; + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) {} + + @override + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + @override + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + @override + void onDragEnd( + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + @override + void onHover( + PointerHoverEvent event, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) {} + + @override + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => true; + + @override + bool shouldRepaint(Set drawingState, DrawingV2 oldDrawing) { + return true; + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart new file mode 100644 index 000000000..c4a30d3be --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -0,0 +1,109 @@ +import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:flutter/gestures.dart'; +import 'package:flutter/widgets.dart'; + +import '../../chart/data_visualization/chart_data.dart'; +import '../../chart/data_visualization/models/animation_info.dart'; +import '../enums/drawing_tool_state.dart'; + +/// The margin for hit testing. +const double hitTestMargin = 32; + +/// Any drawing on the chart that can be interacted with by the user. +abstract class DrawingV2 { + /// Initializes [InteractableDrawing]. + const DrawingV2(); + + /// The drawing tool config. + String get id; + + /// Returns `true` if the drawing tool is hit by the given offset. + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); + + /// The tap event that is called when the [InteractableDrawing] is in adding + /// state. + /// + /// the drawing can use the tap to capture and create the coordinates required + /// for its shape. + /// + /// [onDone] is a callback that should be called when the drawing is done + /// adding. each drawing tool will know when it's done adding. For example + /// a line tool will be done when the user taps on the second point of the + /// line or for horizontal line tool when the user taps one time. + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ); + + /// Called when the drawing tool dragging is started. + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ); + + /// Called when the drawing tool is dragged and updates the drawing position + /// properties based on the dragging [details]. + /// + /// Each drawing will know how to handle and update itself accordingly based + /// on where the dragging position is like if it's dragging a point or a line + /// of the tool. + /// + /// The drawing tools will update its properties based on the dragging at + /// runtime. Saving the new updates to a persistent storage is not the + /// responsibility of this method. + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ); + + /// Called when the drawing tool dragging is ended. + void onDragEnd( + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ); + + /// Called when the user's pointer is hovering over the drawing tool. + void onHover( + PointerHoverEvent event, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ); + + /// Paints the drawing tool on the chart. + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ); + + /// Returns true if the drawing tool should repaint. + bool shouldRepaint( + Set drawingState, + DrawingV2 oldDrawing, + ) { + return drawingState.contains(DrawingToolState.dragging) || + drawingState.contains(DrawingToolState.adding) || + drawingState.contains(DrawingToolState.animating); + } + + /// Whether this drawing is in epoch range. + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange); +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index 8e7cc46d8..ce2ed6140 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -1,5 +1,8 @@ import 'dart:ui' as ui; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -10,6 +13,7 @@ import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_st import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import 'drawing_v2.dart'; import 'interactable_drawing.dart'; /// Interactable drawing for horizontal line drawing tool. @@ -314,6 +318,25 @@ class HorizontalLineInteractableDrawing // For now it won't impact that much in terms of performance, since the // number tools we allow to add in total is limited to a few. true; + + @override + DrawingAddingPreview> + getAddingPreviewForDesktopBehaviour( + InteractiveLayerDesktopBehaviour layerBehaviour, + ) { + throw UnimplementedError(); + } + + @override + DrawingAddingPreview> + getAddingPreviewForMobileBehaviour( + InteractiveLayerMobileBehaviour layerBehaviour, + ) { + return HorizontalLineAddingPreviewMobile( + interactiveLayerBehaviour: layerBehaviour, + interactableDrawing: this, + ); + } } /// A circular array for dash patterns @@ -332,3 +355,31 @@ class CircularIntervalList { return _values[_index++]; } } + +class HorizontalLineAddingPreviewMobile + extends DrawingAddingPreview { + HorizontalLineAddingPreviewMobile({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }); + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + // TODO: implement hitTest + throw UnimplementedError(); + } + + @override + String get id => 'Horizontal-line-adding-preview'; + + @override + void paint( + ui.Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ) { + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index cccb208b6..ddd73bec8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -7,6 +7,8 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import 'drawing_adding_preview.dart'; +import 'drawing_v2.dart'; /// The class that will be generated by the drawing tool config instance when /// they are created or the saved ones that are loaded from storage. @@ -16,14 +18,13 @@ import '../enums/drawing_tool_state.dart'; /// with the tools in the runtime. /// During the time that user interacts with a tool. by some debounce mechanism /// This class will update the config which is supposed to be saved in the storage. -abstract class InteractableDrawing { +abstract class InteractableDrawing + implements DrawingV2 { /// Initializes [InteractableDrawing]. InteractableDrawing({required this.config}); - static const double _hitTestMargin = 32; - - /// The margin for hit testing. - double get hitTestMargin => _hitTestMargin; + @override + String get id => config.configId ?? ''; /// The drawing tool config. final T config; @@ -32,6 +33,7 @@ abstract class InteractableDrawing { T getUpdatedConfig(); /// Returns `true` if the drawing tool is hit by the given offset. + @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); /// The tap event that is called when the [InteractableDrawing] is in adding @@ -44,6 +46,7 @@ abstract class InteractableDrawing { /// adding. each drawing tool will know when it's done adding. For example /// a line tool will be done when the user taps on the second point of the /// line or for horizontal line tool when the user taps one time. + @override void onCreateTap( TapUpDetails details, EpochFromX epochFromX, @@ -54,6 +57,7 @@ abstract class InteractableDrawing { ) {} /// Called when the drawing tool dragging is started. + @override void onDragStart( DragStartDetails details, EpochFromX epochFromX, @@ -72,6 +76,7 @@ abstract class InteractableDrawing { /// The drawing tools will update its properties based on the dragging at /// runtime. Saving the new updates to a persistent storage is not the /// responsibility of this method. + @override void onDragUpdate( DragUpdateDetails details, EpochFromX epochFromX, @@ -81,6 +86,7 @@ abstract class InteractableDrawing { ) {} /// Called when the drawing tool dragging is ended. + @override void onDragEnd( DragEndDetails details, EpochFromX epochFromX, @@ -90,6 +96,7 @@ abstract class InteractableDrawing { ) {} /// Called when the user's pointer is hovering over the drawing tool. + @override void onHover( PointerHoverEvent event, EpochFromX epochFromX, @@ -98,7 +105,7 @@ abstract class InteractableDrawing { QuoteToY quoteToY, ) {} - /// Paints the drawing tool on the chart. + @override void paint( Canvas canvas, Size size, @@ -108,17 +115,17 @@ abstract class InteractableDrawing { Set drawingState, ); - /// Returns true if the drawing tool should repaint. + @override bool shouldRepaint( Set drawingState, - InteractableDrawing oldDrawing, + covariant InteractableDrawing oldDrawing, ) { return drawingState.contains(DrawingToolState.dragging) || drawingState.contains(DrawingToolState.adding) || drawingState.contains(DrawingToolState.animating); } - /// Whether this drawing is in epoch range. + @override bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange); /// Returns back the [InteractableDrawing] which is used for showing the @@ -126,18 +133,16 @@ abstract class InteractableDrawing { /// /// Override this method if you want to show a different preview for mobile /// other than the default one. - InteractableDrawing getAddingPreviewForMobileBehaviour( + DrawingAddingPreview getAddingPreviewForMobileBehaviour( InteractiveLayerMobileBehaviour layerBehaviour, - ) => - this; + ); /// Returns back the [InteractableDrawing] which is used for showing the /// preview of the tool when we're on [InteractiveLayerDesktopBehaviour]. /// /// Override this method if you want to show a different preview for desktop /// other than the default one. - InteractableDrawing getAddingPreviewForDesktopBehaviour( + DrawingAddingPreview getAddingPreviewForDesktopBehaviour( InteractiveLayerDesktopBehaviour layerBehaviour, - ) => - this; + ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 824dfb3b1..9402690e4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -13,6 +13,8 @@ import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_st import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import 'drawing_adding_preview.dart'; +import 'drawing_v2.dart'; import 'interactable_drawing.dart'; /// Interactable drawing for line drawing tool. @@ -523,14 +525,21 @@ class LineInteractableDrawing true); @override - InteractableDrawing getAddingPreviewForMobileBehaviour( + DrawingAddingPreview getAddingPreviewForMobileBehaviour( InteractiveLayerMobileBehaviour layerBehaviour, ) => LineAddingPreviewMobile( - config: config, - startPoint: startPoint, - endPoint: endPoint, + interactiveLayerBehaviour: layerBehaviour, + interactableDrawing: this, ); + + @override + DrawingAddingPreview> + getAddingPreviewForDesktopBehaviour( + InteractiveLayerDesktopBehaviour layerBehaviour, + ) { + throw UnimplementedError(); + } } /// A circular array for dash patterns @@ -550,12 +559,12 @@ class _CircularIntervalList { /// A Line interactable just for the preview of the line when we're adding the /// line tool on mobile. -class LineAddingPreviewMobile extends LineInteractableDrawing { +class LineAddingPreviewMobile + extends DrawingAddingPreview { /// Initializes [LineInteractableDrawing]. LineAddingPreviewMobile({ - required super.config, - required super.startPoint, - required super.endPoint, + required super.interactiveLayerBehaviour, + required super.interactableDrawing, }); @override @@ -566,15 +575,16 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { EpochToX epochToX, QuoteToY quoteToY, ) { - if (startPoint != null && endPoint == null) { + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { final Offset startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), ); // Check if the drag is starting on the start point if ((details.localPosition - startOffset).distance <= hitTestMargin) { - _isDraggingStartPoint = true; + // _isDraggingStartPoint = true; return; } } @@ -582,19 +592,20 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { - if (startPoint != null && endPoint == null) { + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { final startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), ); if ((offset - startOffset).distance <= hitTestMargin) { return true; } - } else if (endPoint != null) { + } else if (interactableDrawing.endPoint != null) { final endOffset = Offset( - epochToX(endPoint!.epoch), - quoteToY(endPoint!.quote), + epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote), ); if ((offset - endOffset).distance <= hitTestMargin) { @@ -613,26 +624,35 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { AnimationInfo animationInfo, Set drawingState, ) { - final LineStyle lineStyle = config.lineStyle; + final LineStyle lineStyle = interactableDrawing.config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); // Check if this drawing is selected - if (startPoint != null && endPoint == null) { - _drawPoint( - startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - _drawPointAlignmentGuides(canvas, size, - Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote))); - } else if (startPoint != null && endPoint != null) { - _drawPoint(endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - _drawPointAlignmentGuides(canvas, size, - Offset(epochToX(endPoint!.epoch), quoteToY(endPoint!.quote))); + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { + _drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + _drawPointAlignmentGuides( + canvas, + size, + Offset(epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote))); + } else if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint != null) { + _drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + _drawPointAlignmentGuides( + canvas, + size, + Offset(epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote))); final startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), ); final endOffset = Offset( - epochToX(endPoint!.epoch), - quoteToY(endPoint!.quote), + epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote), ); // Use glowy paint style if selected, otherwise use normal paint style @@ -645,6 +665,81 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { } } + // TODO(NA): reuse this method from the line interactable drawing + void _drawPoint( + EdgePoint point, + EpochToX epochToX, + QuoteToY quoteToY, + Canvas canvas, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + ) { + canvas.drawCircle( + Offset(epochToX(point.epoch), quoteToY(point.quote)), + 5, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); + } + + // Draws alignment guides (horizontal and vertical lines) for a single point + void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { + // Create a dashed paint style for the alignment guides + final Paint guidesPaint = Paint() + ..color = const Color(0x80FFFFFF) // Semi-transparent white + ..strokeWidth = 1.0 + ..style = PaintingStyle.stroke; + + // Create paths for horizontal and vertical guides + final Path horizontalPath = Path(); + final Path verticalPath = Path(); + + // Draw horizontal and vertical guides from the point + horizontalPath + ..moveTo(0, pointOffset.dy) + ..lineTo(size.width, pointOffset.dy); + + verticalPath + ..moveTo(pointOffset.dx, 0) + ..lineTo(pointOffset.dx, size.height); + + // Draw the dashed lines + canvas + ..drawPath( + _dashPath(horizontalPath, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ) + ..drawPath( + _dashPath(verticalPath, + dashArray: _CircularIntervalList([5, 5])), + guidesPaint, + ); + } + + /// Creates a dashed path from a regular path + Path _dashPath( + Path source, { + required _CircularIntervalList dashArray, + }) { + final Path dest = Path(); + for (final ui.PathMetric metric in source.computeMetrics()) { + double distance = 0; + bool draw = true; + while (distance < metric.length) { + final double len = dashArray.next; + if (draw) { + dest.addPath( + metric.extractPath(distance, distance + len), + Offset.zero, + ); + } + distance += len; + draw = !draw; + } + } + return dest; + } + @override void onCreateTap( TapUpDetails details, @@ -654,17 +749,19 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { QuoteToY quoteToY, VoidCallback onDone, ) { - if (startPoint == null) { - startPoint = EdgePoint( + if (interactableDrawing.startPoint == null) { + interactableDrawing.startPoint = EdgePoint( epoch: epochFromX(details.localPosition.dx), quote: quoteFromY(details.localPosition.dy), ); - } else if (startPoint != null && endPoint == null) { - endPoint = EdgePoint( + } else if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { + interactableDrawing.endPoint = EdgePoint( epoch: epochFromX(200), quote: quoteFromY(200), ); - } else if (startPoint != null && endPoint != null) { + } else if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint != null) { onDone(); } } @@ -677,11 +774,12 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { EpochToX epochToX, QuoteToY quoteToY, ) { - if (startPoint != null && endPoint == null) { + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { // If we're dragging the start point, we need to update its position final Offset startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), ); // Apply the delta to get the new screen position @@ -692,15 +790,15 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { final double newQuote = quoteFromY(newOffset.dy); // Update the start point - startPoint = EdgePoint( + interactableDrawing.startPoint = EdgePoint( epoch: newEpoch, quote: newQuote, ); - } else if (endPoint != null) { + } else if (interactableDrawing.endPoint != null) { // If we're dragging the start point, we need to update its position final Offset endOffset = Offset( - epochToX(endPoint!.epoch), - quoteToY(endPoint!.quote), + epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote), ); // Apply the delta to get the new screen position @@ -711,10 +809,13 @@ class LineAddingPreviewMobile extends LineInteractableDrawing { final double newQuote = quoteFromY(newOffset.dy); // Update the start point - endPoint = EdgePoint( + interactableDrawing.endPoint = EdgePoint( epoch: newEpoch, quote: newQuote, ); } } + + @override + String get id => 'LineAddingPreview'; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 7c3de1e90..8469b58f1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -285,7 +285,8 @@ class _InteractiveLayerGestureHandlerState } @override - Future animateStateChange(StateChangeAnimationDirection direction) async { + Future animateStateChange( + StateChangeAnimationDirection direction) async { await _runAnimation(direction); // if (waitForAnimation) { // await _runAnimation(direction); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 466cd7a98..9a66325e8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -7,6 +7,8 @@ import 'package:flutter/gestures.dart'; import '../chart/data_visualization/chart_data.dart'; import 'enums/drawing_tool_state.dart'; +import 'interactable_drawings/drawing_adding_preview.dart'; +import 'interactable_drawings/drawing_v2.dart'; import 'interactable_drawings/interactable_drawing.dart'; import 'interactive_layer_states/interactive_adding_tool_state.dart'; import 'interactive_layer_states/interactive_normal_state.dart'; @@ -75,7 +77,7 @@ abstract class InteractiveLayerBehaviour { /// Return the adding preview of the [drawing] we're currently adding for this /// Behaviour. - InteractableDrawing getAddingDrawingPreview(InteractableDrawing drawing); + DrawingAddingPreview getAddingDrawingPreview(InteractableDrawing drawing); /// Updates the interactive layer state to the new state. Future updateStateTo( @@ -111,14 +113,11 @@ abstract class InteractiveLayerBehaviour { late final VoidCallback onUpdate; /// The drawings of the interactive layer. - Set getToolState( - InteractableDrawing drawing, - ) => + Set getToolState(DrawingV2 drawing) => _interactiveState.getToolState(drawing); /// The drawings of the interactive layer. - List> get previewDrawings => - _interactiveState.previewDrawings; + List get previewDrawings => _interactiveState.previewDrawings; /// Handles tap event. void onTap(TapUpDetails details) { @@ -162,7 +161,7 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { } @override - InteractableDrawing getAddingDrawingPreview( + DrawingAddingPreview getAddingDrawingPreview( InteractableDrawing drawing, ) => drawing.getAddingPreviewForMobileBehaviour(this); @@ -182,7 +181,7 @@ class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour { } @override - InteractableDrawing getAddingDrawingPreview( + DrawingAddingPreview getAddingDrawingPreview( InteractableDrawing drawing, ) => drawing.getAddingPreviewForDesktopBehaviour(this); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index d7bd2ab46..c1c7336a4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -8,12 +8,14 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactable_drawings/drawing_v2.dart'; import '../interactable_drawings/interactable_drawing.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; @@ -56,17 +58,15 @@ class InteractiveAddingToolState extends InteractiveState /// /// This is initialized when the user first taps on the chart and is used /// to render a preview of the drawing being added. - InteractableDrawing? _addingDrawing; + DrawingAddingPreview? _addingDrawing; @override - List> get previewDrawings => + List get previewDrawings => [if (_addingDrawing != null) _addingDrawing!]; @override - Set getToolState( - InteractableDrawing drawing, - ) => - drawing.config.configId == addingTool.configId + Set getToolState(DrawingV2 drawing) => + drawing.id == addingTool.configId ? {DrawingToolState.adding} : {DrawingToolState.idle}; @@ -109,7 +109,7 @@ class InteractiveAddingToolState extends InteractiveState interactiveLayer.clearAddingDrawing(); final DrawingToolConfig addedConfig = - interactiveLayer.onAddDrawing(_addingDrawing!); + interactiveLayer.onAddDrawing(_addingDrawing!.interactableDrawing); for (final drawing in interactiveLayer.drawings) { if (drawing.config.configId == addedConfig.configId) { @@ -156,8 +156,7 @@ class InteractiveAddingToolStateDesktop AddingToolAlignmentCrossHair(); @override - List> get previewDrawings => - [...super.previewDrawings, _crossHair]; + List get previewDrawings => [...super.previewDrawings, _crossHair]; @override void onHover(PointerHoverEvent event) { @@ -166,30 +165,14 @@ class InteractiveAddingToolStateDesktop } } -// TODO(NA): make an interface above InteractableDrawing that this class can // also implement, so it won't need to have a config instance. /// A cross-hair used for aligning the adding tool. -class AddingToolAlignmentCrossHair - extends InteractableDrawing { +class AddingToolAlignmentCrossHair extends DrawingV2 { /// Initializes the cross-hair with a configuration. - AddingToolAlignmentCrossHair() : super(config: _config); + AddingToolAlignmentCrossHair(); Offset? _currentHoverPosition; - static final _config = AlignmentCrossHairConfig( - configId: '', - drawingData: DrawingData(id: '', drawingParts: []), - edgePoints: const [], - ); - - @override - AlignmentCrossHairConfig get config => _config; - - @override - AlignmentCrossHairConfig getUpdatedConfig() { - return config; - } - @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { return false; @@ -219,6 +202,7 @@ class AddingToolAlignmentCrossHair _drawPointAlignmentGuides(canvas, size, _currentHoverPosition!); } + // TODO(NA): reuse this method from other places. /// Draws alignment guides (horizontal and vertical lines) for a single point void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { // Create a dashed paint style for the alignment guides @@ -276,6 +260,26 @@ class AddingToolAlignmentCrossHair } return dest; } + + @override + String get id => 'alignment-cross-hair'; + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone) {} + + @override + void onDragEnd(DragEndDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} + + @override + void onDragStart(DragStartDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} } /// A temporary configuration class for the cross-hair used in the adding tool. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart index 569b76386..79b653e16 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart @@ -2,6 +2,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactable_drawings/drawing_v2.dart'; import '../interactable_drawings/interactable_drawing.dart'; import 'interactive_state.dart'; @@ -13,9 +14,7 @@ mixin InteractiveHoverState on InteractiveState { InteractableDrawing? _hoveredTool; @override - Set getToolState( - InteractableDrawing drawing, - ) => + Set getToolState(DrawingV2 drawing) => drawing == _hoveredTool ? {DrawingToolState.hovered} : {DrawingToolState.idle}; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 1115509a4..b0290492e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -2,6 +2,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:flutter/widgets.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactable_drawings/drawing_v2.dart'; import '../interactable_drawings/interactable_drawing.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; @@ -39,13 +40,11 @@ class InteractiveSelectedToolState extends InteractiveState bool _draggingStartedOnTool = false; @override - Set getToolState( - InteractableDrawing drawing, - ) { + Set getToolState(DrawingV2 drawing) { final Set hoveredState = super.getToolState(drawing); // If this is the selected drawing - if (drawing.config.configId == selected.config.configId) { + if (drawing.id == selected.config.configId) { // Return dragging state if we're currently dragging the tool if (_draggingStartedOnTool) { hoveredState.add(DrawingToolState.dragging); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart index 7da84f816..2c0dfac75 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart @@ -3,6 +3,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactable_drawings/drawing_v2.dart'; import '../interactable_drawings/interactable_drawing.dart'; import '../interactive_layer_base.dart'; @@ -31,9 +32,7 @@ abstract class InteractiveState { /// /// This method determines the visual and behavioral state of a specific drawing tool. /// Each concrete state implementation returns different [DrawingToolState] values: - Set getToolState( - InteractableDrawing drawing, - ); + Set getToolState(DrawingV2 drawing); /// Additional drawings of the state to be drawn on top of the main drawings. /// @@ -44,7 +43,7 @@ abstract class InteractiveState { /// /// These are usually temporary/preview drawings that a state might want to /// render on top of the main drawings. - List> get previewDrawings => []; + List get previewDrawings => []; /// The interactive layer. /// From 1123502dca22cbdc98313bd83ad24926f84db96f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 11:53:05 +0800 Subject: [PATCH 124/311] reuse paint helper functions --- .../helpers/paint_helpers.dart | 133 ++++++++++++++++++ .../horizontal_line_interactable_drawing.dart | 84 +---------- .../line_interactable_drawing.dart | 126 ++--------------- .../interactive_adding_tool_state.dart | 77 ++-------- 4 files changed, 154 insertions(+), 266 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart new file mode 100644 index 000000000..201e7f8e6 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -0,0 +1,133 @@ +import 'dart:ui'; + +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/theme/painting_styles/line_style.dart'; + +/// Draws alignment guides (horizontal and vertical lines) for a single point +void drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { + // Create a dashed paint style for the alignment guides + final Paint guidesPaint = Paint() + ..color = const Color(0x80FFFFFF) // Semi-transparent white + ..strokeWidth = 1.0 + ..style = PaintingStyle.stroke; + + // Create paths for horizontal and vertical guides + final Path horizontalPath = Path(); + final Path verticalPath = Path(); + + // Draw horizontal and vertical guides from the point + horizontalPath + ..moveTo(0, pointOffset.dy) + ..lineTo(size.width, pointOffset.dy); + + verticalPath + ..moveTo(pointOffset.dx, 0) + ..lineTo(pointOffset.dx, size.height); + + // Draw the dashed lines + canvas + ..drawPath( + _dashPath(horizontalPath, + dashArray: CircularIntervalList([5, 5])), + guidesPaint, + ) + ..drawPath( + _dashPath(verticalPath, + dashArray: CircularIntervalList([5, 5])), + guidesPaint, + ); +} + +/// Creates a dashed path from a regular path +Path _dashPath( + Path source, { + required CircularIntervalList dashArray, +}) { + final Path dest = Path(); + for (final PathMetric metric in source.computeMetrics()) { + double distance = 0; + bool draw = true; + while (distance < metric.length) { + final double len = dashArray.next; + if (draw) { + dest.addPath( + metric.extractPath(distance, distance + len), + Offset.zero, + ); + } + distance += len; + draw = !draw; + } + } + return dest; +} + +/// Draws a point for an anchor point of a drawing tool. +void drawPoint( + EdgePoint point, + EpochToX epochToX, + QuoteToY quoteToY, + Canvas canvas, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, +) { + canvas.drawCircle( + Offset(epochToX(point.epoch), quoteToY(point.quote)), + 5, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); +} + +/// Draws a point for an anchor point of a drawing tool with a glowy effect. +void drawPointsFocusedCircle( + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + Canvas canvas, + Offset startOffset, + double outerCircleRadius, + double innerCircleRadius, + Offset endOffset) { + final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); + final glowyPaintStyle = + paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); + canvas + ..drawCircle( + startOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + startOffset, + innerCircleRadius, + normalPaintStyle, + ) + ..drawCircle( + endOffset, + outerCircleRadius, + glowyPaintStyle, + ) + ..drawCircle( + endOffset, + innerCircleRadius, + normalPaintStyle, + ); +} + +/// A circular array for dash patterns +class CircularIntervalList { + /// Initializes [CircularIntervalList]. + CircularIntervalList(this._values); + + final List _values; + int _index = 0; + + /// Returns the next value in the circular list. + T get next { + if (_index >= _values.length) { + _index = 0; + } + return _values[_index++]; + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart index ce2ed6140..f81d6499a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart @@ -13,6 +13,7 @@ import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_st import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import '../helpers/paint_helpers.dart'; import 'drawing_v2.dart'; import 'interactable_drawing.dart'; @@ -124,7 +125,7 @@ class HorizontalLineInteractableDrawing // Draw alignment guides when dragging if (drawingState.contains(DrawingToolState.dragging)) { - _drawAlignmentGuides(canvas, size, startOffset); + drawPointAlignmentGuides(canvas, size, startOffset); } } else { if (startPoint == null && _hoverPosition != null) { @@ -140,7 +141,7 @@ class HorizontalLineInteractableDrawing ); canvas.drawLine(startPosition, endPosition, paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); - _drawPointAlignmentGuides(canvas, size, startPosition); + drawPointAlignmentGuides(canvas, size, startPosition); } } } @@ -179,70 +180,6 @@ class HorizontalLineInteractableDrawing ); } - /// Draws alignment guides (horizontal lines) for the point - void _drawAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { - // Create a dashed paint style for the alignment guides - final Paint guidesPaint = Paint() - ..color = const Color(0x80FFFFFF) // Semi-transparent white - ..strokeWidth = 1.0 - ..style = PaintingStyle.stroke; - - // Create path for horizontal guide - final Path horizontalPath = Path() - ..moveTo(0, pointOffset.dy) - ..lineTo(size.width, pointOffset.dy); - - // Draw the dashed line - canvas.drawPath( - _dashPath(horizontalPath, - dashArray: CircularIntervalList([5, 5])), - guidesPaint, - ); - } - - /// Creates a dashed path from a regular path - Path _dashPath( - Path source, { - required CircularIntervalList dashArray, - }) { - final Path dest = Path(); - for (final ui.PathMetric metric in source.computeMetrics()) { - double distance = 0; - bool draw = true; - while (distance < metric.length) { - final double len = dashArray.next; - if (draw) { - dest.addPath( - metric.extractPath(distance, distance + len), - Offset.zero, - ); - } - distance += len; - draw = !draw; - } - } - return dest; - } - - void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { - // Create a dashed paint style for the alignment guides - final Paint guidesPaint = Paint() - ..color = const Color(0x80FFFFFF) // Semi-transparent white - ..strokeWidth = 1.0 - ..style = PaintingStyle.stroke; - - // Create path for horizontal guide - final Path horizontalPath = Path() - ..moveTo(0, pointOffset.dy) - ..lineTo(size.width, pointOffset.dy); - - // Draw the dashed line - canvas.drawPath( - _dashPath(horizontalPath, - dashArray: CircularIntervalList([5, 5])), - guidesPaint, - ); - } @override void onCreateTap( @@ -339,22 +276,7 @@ class HorizontalLineInteractableDrawing } } -/// A circular array for dash patterns -class CircularIntervalList { - /// Initializes [CircularIntervalList]. - CircularIntervalList(this._values); - - final List _values; - int _index = 0; - /// Returns the next value in the circular list. - T get next { - if (_index >= _values.length) { - _index = 0; - } - return _values[_index++]; - } -} class HorizontalLineAddingPreviewMobile extends DrawingAddingPreview { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 9402690e4..aa67169cd 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -13,6 +13,7 @@ import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_st import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import '../helpers/paint_helpers.dart'; import 'drawing_adding_preview.dart'; import 'drawing_v2.dart'; import 'interactable_drawing.dart'; @@ -200,7 +201,7 @@ class LineInteractableDrawing // Draw endpoints with glowy effect if selected if (drawingState.contains(DrawingToolState.selected) || drawingState.contains(DrawingToolState.dragging)) { - _drawPointsFocusedCircle( + drawPointsFocusedCircle( paintStyle, lineStyle, canvas, @@ -210,7 +211,7 @@ class LineInteractableDrawing endOffset, ); } else if (drawingState.contains(DrawingToolState.hovered)) { - _drawPointsFocusedCircle( + drawPointsFocusedCircle( paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); } @@ -220,9 +221,9 @@ class LineInteractableDrawing } } else if (drawingState.contains(DrawingToolState.adding)) { if (startPoint != null) { - _drawPoint( + drawPoint( startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - _drawPointAlignmentGuides(canvas, size, + drawPointAlignmentGuides(canvas, size, Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote))); if (_hoverPosition != null) { @@ -234,131 +235,22 @@ class LineInteractableDrawing ); canvas.drawLine(startPosition, _hoverPosition!, paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); - _drawPointAlignmentGuides(canvas, size, _hoverPosition!); + drawPointAlignmentGuides(canvas, size, _hoverPosition!); } } if (endPoint != null) { - _drawPoint( - endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); + drawPoint(endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); } } } - void _drawPointsFocusedCircle( - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ui.Canvas canvas, - ui.Offset startOffset, - double outerCircleRadius, - double innerCircleRadius, - ui.Offset endOffset) { - final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); - final glowyPaintStyle = - paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); - canvas - ..drawCircle( - startOffset, - outerCircleRadius, - glowyPaintStyle, - ) - ..drawCircle( - startOffset, - innerCircleRadius, - normalPaintStyle, - ) - ..drawCircle( - endOffset, - outerCircleRadius, - glowyPaintStyle, - ) - ..drawCircle( - endOffset, - innerCircleRadius, - normalPaintStyle, - ); - } - /// Draws alignment guides (horizontal and vertical lines) from the points void _drawAlignmentGuides(Canvas canvas, Size size, Offset startOffset, Offset endOffset, DrawingPaintStyle paintStyle) { // Draw alignment guides for both start and end points - _drawPointAlignmentGuides(canvas, size, startOffset); - _drawPointAlignmentGuides(canvas, size, endOffset); - } - - /// Draws alignment guides (horizontal and vertical lines) for a single point - void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { - // Create a dashed paint style for the alignment guides - final Paint guidesPaint = Paint() - ..color = const Color(0x80FFFFFF) // Semi-transparent white - ..strokeWidth = 1.0 - ..style = PaintingStyle.stroke; - - // Create paths for horizontal and vertical guides - final Path horizontalPath = Path(); - final Path verticalPath = Path(); - - // Draw horizontal and vertical guides from the point - horizontalPath - ..moveTo(0, pointOffset.dy) - ..lineTo(size.width, pointOffset.dy); - - verticalPath - ..moveTo(pointOffset.dx, 0) - ..lineTo(pointOffset.dx, size.height); - - // Draw the dashed lines - canvas - ..drawPath( - _dashPath(horizontalPath, - dashArray: _CircularIntervalList([5, 5])), - guidesPaint, - ) - ..drawPath( - _dashPath(verticalPath, - dashArray: _CircularIntervalList([5, 5])), - guidesPaint, - ); - } - - /// Creates a dashed path from a regular path - Path _dashPath( - Path source, { - required _CircularIntervalList dashArray, - }) { - final Path dest = Path(); - for (final ui.PathMetric metric in source.computeMetrics()) { - double distance = 0; - bool draw = true; - while (distance < metric.length) { - final double len = dashArray.next; - if (draw) { - dest.addPath( - metric.extractPath(distance, distance + len), - Offset.zero, - ); - } - distance += len; - draw = !draw; - } - } - return dest; - } - - void _drawPoint( - EdgePoint point, - EpochToX epochToX, - QuoteToY quoteToY, - Canvas canvas, - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ) { - canvas.drawCircle( - Offset(epochToX(point.epoch), quoteToY(point.quote)), - 5, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); + drawPointAlignmentGuides(canvas, size, startOffset); + drawPointAlignmentGuides(canvas, size, endOffset); } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index c1c7336a4..be3b641f7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -9,14 +9,13 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; +import '../helpers/paint_helpers.dart'; import '../interactable_drawings/drawing_v2.dart'; -import '../interactable_drawings/interactable_drawing.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; @@ -199,66 +198,7 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { if (_currentHoverPosition == null) { return; } - _drawPointAlignmentGuides(canvas, size, _currentHoverPosition!); - } - - // TODO(NA): reuse this method from other places. - /// Draws alignment guides (horizontal and vertical lines) for a single point - void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { - // Create a dashed paint style for the alignment guides - final Paint guidesPaint = Paint() - ..color = const Color(0x80FFFFFF) // Semi-transparent white - ..strokeWidth = 1.0 - ..style = PaintingStyle.stroke; - - // Create paths for horizontal and vertical guides - final Path horizontalPath = Path(); - final Path verticalPath = Path(); - - // Draw horizontal and vertical guides from the point - horizontalPath - ..moveTo(0, pointOffset.dy) - ..lineTo(size.width, pointOffset.dy); - - verticalPath - ..moveTo(pointOffset.dx, 0) - ..lineTo(pointOffset.dx, size.height); - - // Draw the dashed lines - canvas - ..drawPath( - _dashPath(horizontalPath, - dashArray: CircularIntervalList([5, 5])), - guidesPaint, - ) - ..drawPath( - _dashPath(verticalPath, - dashArray: CircularIntervalList([5, 5])), - guidesPaint, - ); - } - - Path _dashPath( - Path source, { - required CircularIntervalList dashArray, - }) { - final Path dest = Path(); - for (final PathMetric metric in source.computeMetrics()) { - double distance = 0; - bool draw = true; - while (distance < metric.length) { - final double len = dashArray.next; - if (draw) { - dest.addPath( - metric.extractPath(distance, distance + len), - Offset.zero, - ); - } - distance += len; - draw = !draw; - } - } - return dest; + drawPointAlignmentGuides(canvas, size, _currentHoverPosition!); } @override @@ -266,12 +206,13 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { @override void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone) {} + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) {} @override void onDragEnd(DragEndDetails details, EpochFromX epochFromX, From 7fc2aff2ef5bc2f6397f95c9fbfb72190a8e8f4b Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 13:44:34 +0800 Subject: [PATCH 125/311] feat: add preview line drawing tool for desktop --- .../line_interactable_drawing.dart | 117 ++++++++++++++---- .../interactive_layer/interactive_layer.dart | 2 + .../interactive_adding_tool_state.dart | 3 +- 3 files changed, 96 insertions(+), 26 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index aa67169cd..56e03747d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -40,14 +40,6 @@ class LineInteractableDrawing // false: dragging the end point bool? _isDraggingStartPoint; - Offset? _hoverPosition; - - @override - void onHover(PointerHoverEvent event, EpochFromX epochFromX, - QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { - _hoverPosition = event.localPosition; - } - @override void onDragStart( DragStartDetails details, @@ -225,18 +217,6 @@ class LineInteractableDrawing startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); drawPointAlignmentGuides(canvas, size, Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote))); - - if (_hoverPosition != null) { - // endPoint doesn't exist yet and it means we're creating this line. - // Drawing preview line from startPoint to hoverPosition. - final Offset startPosition = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), - ); - canvas.drawLine(startPosition, _hoverPosition!, - paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); - drawPointAlignmentGuides(canvas, size, _hoverPosition!); - } } if (endPoint != null) { @@ -429,9 +409,11 @@ class LineInteractableDrawing DrawingAddingPreview> getAddingPreviewForDesktopBehaviour( InteractiveLayerDesktopBehaviour layerBehaviour, - ) { - throw UnimplementedError(); - } + ) => + LineAddingPreviewDesktop( + interactiveLayerBehaviour: layerBehaviour, + interactableDrawing: this, + ); } /// A circular array for dash patterns @@ -709,5 +691,92 @@ class LineAddingPreviewMobile } @override - String get id => 'LineAddingPreview'; + String get id => 'line-adding-preview-mobile'; +} + +/// Interactable drawing for line drawing tool. +class LineAddingPreviewDesktop + extends DrawingAddingPreview { + /// Initializes [LineInteractableDrawing]. + LineAddingPreviewDesktop({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }); + + Offset? _hoverPosition; + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ) { + final LineStyle lineStyle = interactableDrawing.config.lineStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + + if (interactableDrawing.startPoint != null) { + drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + drawPointAlignmentGuides( + canvas, + size, + Offset(epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote))); + + if (_hoverPosition != null) { + // endPoint doesn't exist yet and it means we're creating this line. + // Drawing preview line from startPoint to hoverPosition. + final Offset startPosition = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + canvas.drawLine(startPosition, _hoverPosition!, + paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); + drawPointAlignmentGuides(canvas, size, _hoverPosition!); + } + } + + if (interactableDrawing.endPoint != null) { + drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + } + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + if (interactableDrawing.startPoint == null) { + interactableDrawing.startPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + } else { + interactableDrawing.endPoint ??= EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + onDone(); + } + } + + @override + String get id => 'line-adding-preview-desktop'; + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 8469b58f1..4ffc8e0a5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -40,6 +40,8 @@ class InteractiveLayer extends StatefulWidget { super.key, }); + /// Interactive layer behaviour which defines how interactive layer should + /// behave in scenarios like adding/dragging, etc. final InteractiveLayerBehaviour interactiveLayerBehaviour; /// Drawing tools. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index be3b641f7..fff3bdfdf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -143,8 +143,7 @@ class InteractiveAddingToolStateMobile extends InteractiveAddingToolState { } /// The desktop-specific implementation of the interactive adding tool state. -class InteractiveAddingToolStateDesktop - extends InteractiveAddingToolStateMobile { +class InteractiveAddingToolStateDesktop extends InteractiveAddingToolState { /// Initializes the state with the interactive layer and the [addingTool]. InteractiveAddingToolStateDesktop( super.addingTool, { From a5565a343c3777131ec85b3ef096e571c9f5a97b Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 13:51:51 +0800 Subject: [PATCH 126/311] code cleanup :recycle: --- .../line_interactable_drawing.dart | 99 +------------------ 1 file changed, 4 insertions(+), 95 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart index 56e03747d..abcbfa633 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart @@ -1,4 +1,3 @@ -import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; @@ -416,21 +415,6 @@ class LineInteractableDrawing ); } -/// A circular array for dash patterns -class _CircularIntervalList { - _CircularIntervalList(this._values); - - final List _values; - int _index = 0; - - T get next { - if (_index >= _values.length) { - _index = 0; - } - return _values[_index++]; - } -} - /// A Line interactable just for the preview of the line when we're adding the /// line tool on mobile. class LineAddingPreviewMobile @@ -504,18 +488,18 @@ class LineAddingPreviewMobile if (interactableDrawing.startPoint != null && interactableDrawing.endPoint == null) { - _drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, + drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - _drawPointAlignmentGuides( + drawPointAlignmentGuides( canvas, size, Offset(epochToX(interactableDrawing.startPoint!.epoch), quoteToY(interactableDrawing.startPoint!.quote))); } else if (interactableDrawing.startPoint != null && interactableDrawing.endPoint != null) { - _drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, + drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - _drawPointAlignmentGuides( + drawPointAlignmentGuides( canvas, size, Offset(epochToX(interactableDrawing.endPoint!.epoch), @@ -539,81 +523,6 @@ class LineAddingPreviewMobile } } - // TODO(NA): reuse this method from the line interactable drawing - void _drawPoint( - EdgePoint point, - EpochToX epochToX, - QuoteToY quoteToY, - Canvas canvas, - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ) { - canvas.drawCircle( - Offset(epochToX(point.epoch), quoteToY(point.quote)), - 5, - paintStyle.glowyCirclePaintStyle(lineStyle.color), - ); - } - - // Draws alignment guides (horizontal and vertical lines) for a single point - void _drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { - // Create a dashed paint style for the alignment guides - final Paint guidesPaint = Paint() - ..color = const Color(0x80FFFFFF) // Semi-transparent white - ..strokeWidth = 1.0 - ..style = PaintingStyle.stroke; - - // Create paths for horizontal and vertical guides - final Path horizontalPath = Path(); - final Path verticalPath = Path(); - - // Draw horizontal and vertical guides from the point - horizontalPath - ..moveTo(0, pointOffset.dy) - ..lineTo(size.width, pointOffset.dy); - - verticalPath - ..moveTo(pointOffset.dx, 0) - ..lineTo(pointOffset.dx, size.height); - - // Draw the dashed lines - canvas - ..drawPath( - _dashPath(horizontalPath, - dashArray: _CircularIntervalList([5, 5])), - guidesPaint, - ) - ..drawPath( - _dashPath(verticalPath, - dashArray: _CircularIntervalList([5, 5])), - guidesPaint, - ); - } - - /// Creates a dashed path from a regular path - Path _dashPath( - Path source, { - required _CircularIntervalList dashArray, - }) { - final Path dest = Path(); - for (final ui.PathMetric metric in source.computeMetrics()) { - double distance = 0; - bool draw = true; - while (distance < metric.length) { - final double len = dashArray.next; - if (draw) { - dest.addPath( - metric.extractPath(distance, distance + len), - Offset.zero, - ); - } - distance += len; - draw = !draw; - } - } - return dest; - } - @override void onCreateTap( TapUpDetails details, From c73b15f872711e203dce2c455c9067ce2ff5af8e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 13:58:45 +0800 Subject: [PATCH 127/311] chore: move trend line files to a separate folder --- .../horizontal_drawing_tool_config.dart | 2 +- .../line/line_drawing_tool_config.dart | 2 +- .../horizontal_line_interactable_drawing.dart | 16 +- .../line_interactable_drawing.dart | 298 +----------------- .../trend_line_adding_preview_desktop.dart | 100 ++++++ .../trend_line_adding_preview_mobile.dart | 200 ++++++++++++ 6 files changed, 322 insertions(+), 296 deletions(-) rename lib/src/deriv_chart/interactive_layer/interactable_drawings/{ => horizontal_line}/horizontal_line_interactable_drawing.dart (95%) rename lib/src/deriv_chart/interactive_layer/interactable_drawings/{ => trend_line}/line_interactable_drawing.dart (57%) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index de5c8fa3e..21da2c50d 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -4,7 +4,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.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/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index 38a9671f2..a64fbf702 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -7,7 +7,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_model/point.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart similarity index 95% rename from lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart rename to lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index f81d6499a..794458814 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -8,14 +8,14 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; -import '../../chart/data_visualization/chart_data.dart'; -import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; -import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; -import '../../chart/data_visualization/models/animation_info.dart'; -import '../enums/drawing_tool_state.dart'; -import '../helpers/paint_helpers.dart'; -import 'drawing_v2.dart'; -import 'interactable_drawing.dart'; +import '../../../chart/data_visualization/chart_data.dart'; +import '../../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; +import '../../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; +import '../../../chart/data_visualization/models/animation_info.dart'; +import '../../enums/drawing_tool_state.dart'; +import '../../helpers/paint_helpers.dart'; +import '../drawing_v2.dart'; +import '../interactable_drawing.dart'; /// Interactable drawing for horizontal line drawing tool. class HorizontalLineInteractableDrawing diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart similarity index 57% rename from lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart rename to lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart index abcbfa633..bcf37cbc5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart @@ -1,21 +1,22 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_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/extensions/extensions.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; -import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; -import '../../chart/data_visualization/chart_data.dart'; -import '../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; -import '../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; -import '../../chart/data_visualization/models/animation_info.dart'; -import '../enums/drawing_tool_state.dart'; -import '../helpers/paint_helpers.dart'; -import 'drawing_adding_preview.dart'; -import 'drawing_v2.dart'; -import 'interactable_drawing.dart'; +import '../../helpers/paint_helpers.dart'; +import '../../interactive_layer_base.dart'; +import '../drawing_adding_preview.dart'; +import '../drawing_v2.dart'; +import '../interactable_drawing.dart'; +import 'trend_line_adding_preview_desktop.dart'; +import 'trend_line_adding_preview_mobile.dart'; /// Interactable drawing for line drawing tool. class LineInteractableDrawing @@ -414,278 +415,3 @@ class LineInteractableDrawing interactableDrawing: this, ); } - -/// A Line interactable just for the preview of the line when we're adding the -/// line tool on mobile. -class LineAddingPreviewMobile - extends DrawingAddingPreview { - /// Initializes [LineInteractableDrawing]. - LineAddingPreviewMobile({ - required super.interactiveLayerBehaviour, - required super.interactableDrawing, - }); - - @override - void onDragStart( - DragStartDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - final Offset startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); - - // Check if the drag is starting on the start point - if ((details.localPosition - startOffset).distance <= hitTestMargin) { - // _isDraggingStartPoint = true; - return; - } - } - } - - @override - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - final startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); - - if ((offset - startOffset).distance <= hitTestMargin) { - return true; - } - } else if (interactableDrawing.endPoint != null) { - final endOffset = Offset( - epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote), - ); - - if ((offset - endOffset).distance <= hitTestMargin) { - return true; - } - } - return false; - } - - @override - void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - Set drawingState, - ) { - final LineStyle lineStyle = interactableDrawing.config.lineStyle; - final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - // Check if this drawing is selected - - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, - paintStyle, lineStyle); - drawPointAlignmentGuides( - canvas, - size, - Offset(epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote))); - } else if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint != null) { - drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, - paintStyle, lineStyle); - drawPointAlignmentGuides( - canvas, - size, - Offset(epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote))); - final startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); - final endOffset = Offset( - epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote), - ); - - // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = drawingState.contains(DrawingToolState.selected) || - drawingState.contains(DrawingToolState.dragging) - ? paintStyle.linePaintStyle( - lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) - : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); - canvas.drawLine(startOffset, endOffset, paint); - } - } - - @override - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) { - if (interactableDrawing.startPoint == null) { - interactableDrawing.startPoint = EdgePoint( - epoch: epochFromX(details.localPosition.dx), - quote: quoteFromY(details.localPosition.dy), - ); - } else if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - interactableDrawing.endPoint = EdgePoint( - epoch: epochFromX(200), - quote: quoteFromY(200), - ); - } else if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint != null) { - onDone(); - } - } - - @override - void onDragUpdate( - DragUpdateDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - // If we're dragging the start point, we need to update its position - final Offset startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); - - // Apply the delta to get the new screen position - final Offset newOffset = startOffset + details.delta; - - // Convert back to epoch and quote coordinates - final int newEpoch = epochFromX(newOffset.dx); - final double newQuote = quoteFromY(newOffset.dy); - - // Update the start point - interactableDrawing.startPoint = EdgePoint( - epoch: newEpoch, - quote: newQuote, - ); - } else if (interactableDrawing.endPoint != null) { - // If we're dragging the start point, we need to update its position - final Offset endOffset = Offset( - epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote), - ); - - // Apply the delta to get the new screen position - final Offset newOffset = endOffset + details.delta; - - // Convert back to epoch and quote coordinates - final int newEpoch = epochFromX(newOffset.dx); - final double newQuote = quoteFromY(newOffset.dy); - - // Update the start point - interactableDrawing.endPoint = EdgePoint( - epoch: newEpoch, - quote: newQuote, - ); - } - } - - @override - String get id => 'line-adding-preview-mobile'; -} - -/// Interactable drawing for line drawing tool. -class LineAddingPreviewDesktop - extends DrawingAddingPreview { - /// Initializes [LineInteractableDrawing]. - LineAddingPreviewDesktop({ - required super.interactiveLayerBehaviour, - required super.interactableDrawing, - }); - - Offset? _hoverPosition; - - @override - void onHover(PointerHoverEvent event, EpochFromX epochFromX, - QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { - _hoverPosition = event.localPosition; - } - - @override - void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - Set drawingState, - ) { - final LineStyle lineStyle = interactableDrawing.config.lineStyle; - final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - - if (interactableDrawing.startPoint != null) { - drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, - paintStyle, lineStyle); - drawPointAlignmentGuides( - canvas, - size, - Offset(epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote))); - - if (_hoverPosition != null) { - // endPoint doesn't exist yet and it means we're creating this line. - // Drawing preview line from startPoint to hoverPosition. - final Offset startPosition = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); - canvas.drawLine(startPosition, _hoverPosition!, - paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); - drawPointAlignmentGuides(canvas, size, _hoverPosition!); - } - } - - if (interactableDrawing.endPoint != null) { - drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, - paintStyle, lineStyle); - } - } - - @override - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) { - if (interactableDrawing.startPoint == null) { - interactableDrawing.startPoint = EdgePoint( - epoch: epochFromX(details.localPosition.dx), - quote: quoteFromY(details.localPosition.dy), - ); - } else { - interactableDrawing.endPoint ??= EdgePoint( - epoch: epochFromX(details.localPosition.dx), - quote: quoteFromY(details.localPosition.dy), - ); - onDone(); - } - } - - @override - String get id => 'line-adding-preview-desktop'; - - @override - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; -} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart new file mode 100644 index 000000000..aed6cce67 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -0,0 +1,100 @@ +import 'dart:ui'; + +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/interactive_layer/enums/drawing_tool_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; +import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/gestures.dart'; + +import '../drawing_adding_preview.dart'; +import 'line_interactable_drawing.dart'; + +/// Interactable drawing for line drawing tool. +class LineAddingPreviewDesktop + extends DrawingAddingPreview { + /// Initializes [LineInteractableDrawing]. + LineAddingPreviewDesktop({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }); + + Offset? _hoverPosition; + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ) { + final LineStyle lineStyle = interactableDrawing.config.lineStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + + if (interactableDrawing.startPoint != null) { + drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + drawPointAlignmentGuides( + canvas, + size, + Offset(epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote))); + + if (_hoverPosition != null) { + // endPoint doesn't exist yet and it means we're creating this line. + // Drawing preview line from startPoint to hoverPosition. + final Offset startPosition = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + canvas.drawLine(startPosition, _hoverPosition!, + paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); + drawPointAlignmentGuides(canvas, size, _hoverPosition!); + } + } + + if (interactableDrawing.endPoint != null) { + drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + } + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + if (interactableDrawing.startPoint == null) { + interactableDrawing.startPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + } else { + interactableDrawing.endPoint ??= EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + onDone(); + } + } + + @override + String get id => 'line-adding-preview-desktop'; + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart new file mode 100644 index 000000000..bf04c1d7f --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -0,0 +1,200 @@ +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/interactive_layer/enums/drawing_tool_state.dart'; +import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/widgets.dart'; + +import '../../helpers/paint_helpers.dart'; +import '../drawing_adding_preview.dart'; +import '../drawing_v2.dart'; +import 'line_interactable_drawing.dart'; + +/// A Line interactable just for the preview of the line when we're adding the +/// line tool on mobile. +class LineAddingPreviewMobile + extends DrawingAddingPreview { + /// Initializes [LineInteractableDrawing]. + LineAddingPreviewMobile({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }); + + @override + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { + final Offset startOffset = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + + // Check if the drag is starting on the start point + if ((details.localPosition - startOffset).distance <= hitTestMargin) { + // _isDraggingStartPoint = true; + return; + } + } + } + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { + final startOffset = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + + if ((offset - startOffset).distance <= hitTestMargin) { + return true; + } + } else if (interactableDrawing.endPoint != null) { + final endOffset = Offset( + epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote), + ); + + if ((offset - endOffset).distance <= hitTestMargin) { + return true; + } + } + return false; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ) { + final LineStyle lineStyle = interactableDrawing.config.lineStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + // Check if this drawing is selected + + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { + drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + drawPointAlignmentGuides( + canvas, + size, + Offset(epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote))); + } else if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint != null) { + drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, + paintStyle, lineStyle); + drawPointAlignmentGuides( + canvas, + size, + Offset(epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote))); + final startOffset = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + final endOffset = Offset( + epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote), + ); + + // Use glowy paint style if selected, otherwise use normal paint style + final Paint paint = drawingState.contains(DrawingToolState.selected) || + drawingState.contains(DrawingToolState.dragging) + ? paintStyle.linePaintStyle( + lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) + : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); + canvas.drawLine(startOffset, endOffset, paint); + } + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + if (interactableDrawing.startPoint == null) { + interactableDrawing.startPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + } else if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { + interactableDrawing.endPoint = EdgePoint( + epoch: epochFromX(200), + quote: quoteFromY(200), + ); + } else if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint != null) { + onDone(); + } + } + + @override + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint == null) { + // If we're dragging the start point, we need to update its position + final Offset startOffset = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + + // Apply the delta to get the new screen position + final Offset newOffset = startOffset + details.delta; + + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Update the start point + interactableDrawing.startPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + } else if (interactableDrawing.endPoint != null) { + // If we're dragging the start point, we need to update its position + final Offset endOffset = Offset( + epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote), + ); + + // Apply the delta to get the new screen position + final Offset newOffset = endOffset + details.delta; + + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Update the start point + interactableDrawing.endPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + } + } + + @override + String get id => 'line-adding-preview-mobile'; +} From 22e3b14fcded77d799437c2e3643930262c3df3d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 14:02:02 +0800 Subject: [PATCH 128/311] chore: move horizontal line files to a separate folder --- ...orizontal_line_adding_preview_desktop.dart | 36 +++++++++++++++++++ ...horizontal_line_adding_preview_mobile.dart | 36 +++++++++++++++++++ .../horizontal_line_interactable_drawing.dart | 35 +++--------------- 3 files changed, 77 insertions(+), 30 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart new file mode 100644 index 000000000..0cd30565a --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -0,0 +1,36 @@ +import 'dart:ui'; + +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; + +import '../../enums/drawing_tool_state.dart'; +import '../drawing_adding_preview.dart'; +import 'horizontal_line_interactable_drawing.dart'; + +/// Adding preview for horizontal line when we're adding the line tool on +/// [InteractiveLayerMobileBehaviour]. +class HorizontalLineAddingPreviewDesktop + extends DrawingAddingPreview { + /// Initializes [HorizontalLineInteractableDrawing]. + HorizontalLineAddingPreviewDesktop({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }); + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; + + @override + String get id => 'Horizontal-line-adding-preview-desktop'; + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ) {} +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart new file mode 100644 index 000000000..aaf784ded --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -0,0 +1,36 @@ +import 'dart:ui'; + +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; + +import '../../enums/drawing_tool_state.dart'; +import '../drawing_adding_preview.dart'; +import 'horizontal_line_interactable_drawing.dart'; + +/// Adding preview for horizontal line when we're adding the line tool on +/// [InteractiveLayerMobileBehaviour]. +class HorizontalLineAddingPreviewMobile + extends DrawingAddingPreview { + /// Initializes [HorizontalLineInteractableDrawing]. + HorizontalLineAddingPreviewMobile({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }); + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; + + @override + String get id => 'Horizontal-line-adding-preview-mobile'; + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + Set drawingState, + ) {} +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 794458814..4571b3bfd 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -1,6 +1,10 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_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/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; @@ -8,14 +12,11 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; -import '../../../chart/data_visualization/chart_data.dart'; -import '../../../chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; -import '../../../chart/data_visualization/drawing_tools/data_model/edge_point.dart'; -import '../../../chart/data_visualization/models/animation_info.dart'; import '../../enums/drawing_tool_state.dart'; import '../../helpers/paint_helpers.dart'; import '../drawing_v2.dart'; import '../interactable_drawing.dart'; +import 'horizontal_line_adding_preview_mobile.dart'; /// Interactable drawing for horizontal line drawing tool. class HorizontalLineInteractableDrawing @@ -278,30 +279,4 @@ class HorizontalLineInteractableDrawing -class HorizontalLineAddingPreviewMobile - extends DrawingAddingPreview { - HorizontalLineAddingPreviewMobile({ - required super.interactiveLayerBehaviour, - required super.interactableDrawing, - }); - @override - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { - // TODO: implement hitTest - throw UnimplementedError(); - } - - @override - String get id => 'Horizontal-line-adding-preview'; - - @override - void paint( - ui.Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - Set drawingState, - ) { - } -} From 6c2cf932c16e55cdd3bf61a4a4d3e302895b5cae Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 14:12:09 +0800 Subject: [PATCH 129/311] feat: add desktop preivew line for horizontal line --- ...orizontal_line_adding_preview_desktop.dart | 40 ++++++++++++++++++- .../horizontal_line_interactable_drawing.dart | 25 +++++------- 2 files changed, 50 insertions(+), 15 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index 0cd30565a..e32896e3e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -1,8 +1,10 @@ import 'dart:ui'; 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/edge_point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; +import 'package:flutter/gestures.dart'; import '../../enums/drawing_tool_state.dart'; import '../drawing_adding_preview.dart'; @@ -18,9 +20,17 @@ class HorizontalLineAddingPreviewDesktop required super.interactableDrawing, }); + Offset? _hoverPosition; + @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + @override String get id => 'Horizontal-line-adding-preview-desktop'; @@ -32,5 +42,33 @@ class HorizontalLineAddingPreviewDesktop QuoteToY quoteToY, AnimationInfo animationInfo, Set drawingState, - ) {} + ) { + if (_hoverPosition != null) { + canvas.drawLine( + Offset(0, _hoverPosition!.dy), + Offset(size.width, _hoverPosition!.dy), + Paint() + ..color = interactableDrawing.config.lineStyle.color + ..style = PaintingStyle.stroke, + ); + } + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + if (interactableDrawing.startPoint == null) { + interactableDrawing.startPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + onDone(); + } + } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 4571b3bfd..fc033345c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; @@ -181,7 +182,6 @@ class HorizontalLineInteractableDrawing ); } - @override void onCreateTap( TapUpDetails details, @@ -261,22 +261,19 @@ class HorizontalLineInteractableDrawing DrawingAddingPreview> getAddingPreviewForDesktopBehaviour( InteractiveLayerDesktopBehaviour layerBehaviour, - ) { - throw UnimplementedError(); - } + ) => + HorizontalLineAddingPreviewDesktop( + interactiveLayerBehaviour: layerBehaviour, + interactableDrawing: this, + ); @override DrawingAddingPreview> getAddingPreviewForMobileBehaviour( InteractiveLayerMobileBehaviour layerBehaviour, - ) { - return HorizontalLineAddingPreviewMobile( - interactiveLayerBehaviour: layerBehaviour, - interactableDrawing: this, - ); - } + ) => + HorizontalLineAddingPreviewMobile( + interactiveLayerBehaviour: layerBehaviour, + interactableDrawing: this, + ); } - - - - From bce64c9316d20285606a152373b8877d291852f0 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 14:18:02 +0800 Subject: [PATCH 130/311] chore: add some docs --- .../interactable_drawings/drawing_v2.dart | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index c4a30d3be..b84412c7e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -9,12 +10,18 @@ import '../enums/drawing_tool_state.dart'; /// The margin for hit testing. const double hitTestMargin = 32; -/// Any drawing on the chart that can be interacted with by the user. +/// Base interface for any drawing on the [InteractiveLayer] and can be +/// interacted with by the user. +/// +/// This base class defines the life-cycle functionality of the drawings in +/// [InteractiveLayer], anything from gesture handling (onTap, onDrag, etc) +/// to painting the drawing on the chart. abstract class DrawingV2 { /// Initializes [InteractableDrawing]. const DrawingV2(); - /// The drawing tool config. + /// The id of the drawing which should be unique for each drawing in + /// [InteractiveLayer]. String get id; /// Returns `true` if the drawing tool is hit by the given offset. From 1e27e2628461c3e784e9fdbdd797a2bb687aed50 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 14:23:46 +0800 Subject: [PATCH 131/311] use AddingToolAlignmentCrossHair inside TrendLine adding preview --- .../adding_tool_alignment_cross_hair.dart | 68 +++++++++++ .../trend_line_adding_preview_desktop.dart | 9 ++ .../interactive_layer_base.dart | 11 -- .../interactive_adding_tool_state.dart | 112 ------------------ 4 files changed, 77 insertions(+), 123 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart new file mode 100644 index 000000000..e44a87adc --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -0,0 +1,68 @@ +import 'dart:ui'; + +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:flutter/gestures.dart'; + +import '../../enums/drawing_tool_state.dart'; +import '../../helpers/paint_helpers.dart'; +import '../drawing_v2.dart'; + +/// A cross-hair used for aligning the adding tool. +class AddingToolAlignmentCrossHair extends DrawingV2 { + /// Initializes the cross-hair with a configuration. + AddingToolAlignmentCrossHair(); + + Offset? _currentHoverPosition; + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + return false; + } + + @override + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) { + return true; + } + + @override + void onDragUpdate(DragUpdateDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _currentHoverPosition = event.localPosition; + } + + @override + void paint(Canvas canvas, Size size, EpochToX epochToX, QuoteToY quoteToY, + AnimationInfo animationInfo, Set drawingState) { + if (_currentHoverPosition == null) { + return; + } + drawPointAlignmentGuides(canvas, size, _currentHoverPosition!); + } + + @override + String get id => 'alignment-cross-hair'; + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) {} + + @override + void onDragEnd(DragEndDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} + + @override + void onDragStart(DragStartDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index aed6cce67..9f71efb12 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -10,6 +10,7 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import '../drawing_adding_preview.dart'; +import 'adding_tool_alignment_cross_hair.dart'; import 'line_interactable_drawing.dart'; /// Interactable drawing for line drawing tool. @@ -23,10 +24,15 @@ class LineAddingPreviewDesktop Offset? _hoverPosition; + final AddingToolAlignmentCrossHair _addingToolAlignmentCrossHair = + AddingToolAlignmentCrossHair(); + @override void onHover(PointerHoverEvent event, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { _hoverPosition = event.localPosition; + _addingToolAlignmentCrossHair.onHover( + event, epochFromX, quoteFromY, epochToX, quoteToY); } @override @@ -67,6 +73,9 @@ class LineAddingPreviewDesktop drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); } + + _addingToolAlignmentCrossHair.paint( + canvas, size, epochToX, quoteToY, animationInfo, drawingState); } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 9a66325e8..7b9b857e5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -169,17 +169,6 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { /// The Desktop-specific implementation of the interactive layer behaviour. class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour { - @override - void onAddDrawingTool(DrawingToolConfig drawingTool) { - updateStateTo( - InteractiveAddingToolStateDesktop( - drawingTool, - interactiveLayerBehaviour: this, - ), - StateChangeAnimationDirection.forward, - ); - } - @override DrawingAddingPreview getAddingDrawingPreview( InteractableDrawing drawing, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index fff3bdfdf..25cc4e5b3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -141,115 +141,3 @@ class InteractiveAddingToolStateMobile extends InteractiveAddingToolState { } } } - -/// The desktop-specific implementation of the interactive adding tool state. -class InteractiveAddingToolStateDesktop extends InteractiveAddingToolState { - /// Initializes the state with the interactive layer and the [addingTool]. - InteractiveAddingToolStateDesktop( - super.addingTool, { - required super.interactiveLayerBehaviour, - }); - - final AddingToolAlignmentCrossHair _crossHair = - AddingToolAlignmentCrossHair(); - - @override - List get previewDrawings => [...super.previewDrawings, _crossHair]; - - @override - void onHover(PointerHoverEvent event) { - super.onHover(event); - _crossHair.onHover(event, epochFromX, quoteFromY, epochToX, quoteToY); - } -} - -// also implement, so it won't need to have a config instance. -/// A cross-hair used for aligning the adding tool. -class AddingToolAlignmentCrossHair extends DrawingV2 { - /// Initializes the cross-hair with a configuration. - AddingToolAlignmentCrossHair(); - - Offset? _currentHoverPosition; - - @override - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { - return false; - } - - @override - bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) { - return true; - } - - @override - void onDragUpdate(DragUpdateDetails details, EpochFromX epochFromX, - QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} - - @override - void onHover(PointerHoverEvent event, EpochFromX epochFromX, - QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { - _currentHoverPosition = event.localPosition; - } - - @override - void paint(Canvas canvas, Size size, EpochToX epochToX, QuoteToY quoteToY, - AnimationInfo animationInfo, Set drawingState) { - if (_currentHoverPosition == null) { - return; - } - drawPointAlignmentGuides(canvas, size, _currentHoverPosition!); - } - - @override - String get id => 'alignment-cross-hair'; - - @override - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) {} - - @override - void onDragEnd(DragEndDetails details, EpochFromX epochFromX, - QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} - - @override - void onDragStart(DragStartDetails details, EpochFromX epochFromX, - QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} -} - -/// A temporary configuration class for the cross-hair used in the adding tool. -class AlignmentCrossHairConfig extends DrawingToolConfig { - /// Initializes the cross-hair configuration. - const AlignmentCrossHairConfig({ - required super.configId, - required super.drawingData, - required super.edgePoints, - }); - - @override - DrawingToolConfig copyWith({ - String? configId, - DrawingData? drawingData, - LineStyle? lineStyle, - LineStyle? fillStyle, - DrawingPatterns? pattern, - List? edgePoints, - bool? enableLabel, - int? number, - }) => - this; - - @override - DrawingToolItem getItem( - UpdateDrawingTool updateDrawingTool, VoidCallback deleteDrawingTool) { - throw UnimplementedError(); - } - - @override - Map toJson() => {}; -} From 53352ab61583259cfeb6be89e1a12649d96ee1b3 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 14:35:54 +0800 Subject: [PATCH 132/311] adding spawn point of the line preview on mobile inside the preview itself --- .../trend_line/trend_line_adding_preview_mobile.dart | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index bf04c1d7f..215f99411 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -19,7 +19,13 @@ class LineAddingPreviewMobile LineAddingPreviewMobile({ required super.interactiveLayerBehaviour, required super.interactableDrawing, - }); + }) { + // TODO(Ramin): use center of the screen which is received from interactive layer instead of hardcoded values + interactableDrawing.startPoint = EdgePoint( + epoch: interactiveLayerBehaviour.interactiveLayer.epochFromX(200), + quote: interactiveLayerBehaviour.interactiveLayer.quoteFromY(200), + ); + } @override void onDragStart( From 8767bbab28d09dbee9892e9398131e204d743243 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 14:41:32 +0800 Subject: [PATCH 133/311] code cleanup :recycle: --- .../drawing_adding_preview.dart | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart index cbdf33c16..c330797d9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -1,6 +1,7 @@ import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/foundation.dart'; @@ -8,7 +9,13 @@ import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; -/// The base class for drawing previews. +/// A preview of a drawing that is being added to the [InteractiveLayer]. +/// +/// This tool is only shown during the lifetime of the drawing addition. +/// It displays a preview of the drawing along with any alignment lines or +/// hints. +/// +/// Once the drawing is added, this preview is removed. abstract class DrawingAddingPreview< T extends InteractableDrawing> implements DrawingV2 { /// Initializes the [DrawingAddingPreview]. @@ -17,10 +24,14 @@ abstract class DrawingAddingPreview< required this.interactableDrawing, }); - /// + /// The current interactive layer behaviour which is active and defines how + /// this preview should behave. Since the behaviour of a adding preview can + /// be different depending on the [InteractiveLayerBehaviour] (desktop or + /// mobile). final InteractiveLayerBehaviour interactiveLayerBehaviour; - /// The config of the drawing tool that is going to be added. + /// The reference to the [InteractableDrawing] instance of the drawing tool + /// that is going to be added. final T interactableDrawing; @override @@ -73,7 +84,9 @@ abstract class DrawingAddingPreview< bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => true; @override - bool shouldRepaint(Set drawingState, DrawingV2 oldDrawing) { - return true; - } + bool shouldRepaint( + Set drawingState, + DrawingV2 oldDrawing, + ) => + true; } From 538ae306222b9cdecbc1a40fefadfcf4504edb5c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 15:00:56 +0800 Subject: [PATCH 134/311] implement mobile preview for horizontal line' --- ...horizontal_line_adding_preview_mobile.dart | 63 ++++++++++++++++++- 1 file changed, 60 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index aaf784ded..9a82f9877 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -1,8 +1,10 @@ import 'dart:ui'; 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/edge_point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; +import 'package:flutter/gestures.dart'; import '../../enums/drawing_tool_state.dart'; import '../drawing_adding_preview.dart'; @@ -16,14 +18,40 @@ class HorizontalLineAddingPreviewMobile HorizontalLineAddingPreviewMobile({ required super.interactiveLayerBehaviour, required super.interactableDrawing, - }); + }) { + interactableDrawing.startPoint = EdgePoint( + epoch: interactiveLayerBehaviour.interactiveLayer.epochFromX(200), + quote: interactiveLayerBehaviour.interactiveLayer.quoteFromY(200), + ); + } @override - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + return interactableDrawing.hitTest(offset, epochToX, quoteToY); + } @override String get id => 'Horizontal-line-adding-preview-mobile'; + @override + void onDragStart(DragStartDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + interactableDrawing.onDragStart( + details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onDragUpdate(DragUpdateDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + interactableDrawing.onDragUpdate( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); + } + @override void paint( Canvas canvas, @@ -32,5 +60,34 @@ class HorizontalLineAddingPreviewMobile QuoteToY quoteToY, AnimationInfo animationInfo, Set drawingState, - ) {} + ) { + if (interactableDrawing.startPoint != null) { + final double lineY = quoteToY(interactableDrawing.startPoint!.quote); + + canvas.drawLine( + Offset(0, lineY), + Offset(size.width, lineY), + Paint() + ..color = interactableDrawing.config.lineStyle.color + ..style = PaintingStyle.stroke, + ); + } + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + interactableDrawing.startPoint ??= EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + + onDone(); + } } From fa82e3ff841e99bf1eeaf18b2258e3cd8811f925 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 15:28:27 +0800 Subject: [PATCH 135/311] code cleanup :recycle: --- .../drawing_adding_preview.dart | 13 +++++++++-- .../interactable_drawings/drawing_v2.dart | 19 +-------------- .../horizontal_line_interactable_drawing.dart | 18 --------------- .../trend_line/line_interactable_drawing.dart | 23 ------------------- .../trend_line_adding_preview_mobile.dart | 23 ------------------- 5 files changed, 12 insertions(+), 84 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart index c330797d9..9cbdca5ff 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -34,7 +34,16 @@ abstract class DrawingAddingPreview< /// that is going to be added. final T interactableDrawing; - @override + /// The tap event that is called when user taps on a position on the screen + /// when we're in adding state. + /// + /// the drawing can use the tap to capture and create the coordinates required + /// for its shape. + /// + /// [onDone] is a callback that should be called when the drawing is done + /// adding. each drawing tool will know when it's done adding. For example + /// a line tool will be done when the user taps on the second point of the + /// line or for horizontal line tool when the user taps one time. void onCreateTap( TapUpDetails details, EpochFromX epochFromX, @@ -42,7 +51,7 @@ abstract class DrawingAddingPreview< EpochToX epochToX, QuoteToY quoteToY, VoidCallback onDone, - ) {} + ); @override void onDragStart( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index b84412c7e..61ccd42d9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -27,24 +27,7 @@ abstract class DrawingV2 { /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); - /// The tap event that is called when the [InteractableDrawing] is in adding - /// state. - /// - /// the drawing can use the tap to capture and create the coordinates required - /// for its shape. - /// - /// [onDone] is a callback that should be called when the drawing is done - /// adding. each drawing tool will know when it's done adding. For example - /// a line tool will be done when the user taps on the second point of the - /// line or for horizontal line tool when the user taps one time. - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ); + /// Called when the drawing tool dragging is started. void onDragStart( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index fc033345c..6de48fc91 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -182,24 +182,6 @@ class HorizontalLineInteractableDrawing ); } - @override - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) { - if (startPoint == null) { - final quote = quoteFromY(details.localPosition.dy); - startPoint = EdgePoint( - epoch: epochFromX(0), // Start from left edge - quote: quote, - ); - onDone(); // Complete immediately since we don't need a second tap - } - } @override void onDragUpdate( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart index bcf37cbc5..0ca1fcd1e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart @@ -233,29 +233,6 @@ class LineInteractableDrawing drawPointAlignmentGuides(canvas, size, endOffset); } - @override - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) { - if (startPoint == null) { - startPoint = EdgePoint( - epoch: epochFromX(details.localPosition.dx), - quote: quoteFromY(details.localPosition.dy), - ); - } else { - endPoint ??= EdgePoint( - epoch: epochFromX(details.localPosition.dx), - quote: quoteFromY(details.localPosition.dy), - ); - onDone(); - } - } - @override void onDragUpdate( DragUpdateDetails details, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 215f99411..11cc12e6d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -27,29 +27,6 @@ class LineAddingPreviewMobile ); } - @override - void onDragStart( - DragStartDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - ) { - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - final Offset startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); - - // Check if the drag is starting on the start point - if ((details.localPosition - startOffset).distance <= hitTestMargin) { - // _isDraggingStartPoint = true; - return; - } - } - } - @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { if (interactableDrawing.startPoint != null && From 387f161cc36ccdc1d43509793155bc171138d548 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 15:38:52 +0800 Subject: [PATCH 136/311] add size property to interactive layer --- .../drawing_tools/data_model/edge_point.dart | 11 +++++++ .../trend_line_adding_preview_mobile.dart | 16 +++++----- .../interactive_layer/interactive_layer.dart | 31 +++++++++---------- .../interactive_layer_base.dart | 3 ++ 4 files changed, 38 insertions(+), 23 deletions(-) diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/edge_point.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/edge_point.dart index 9529582f0..f7f9121e2 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/edge_point.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/edge_point.dart @@ -25,6 +25,17 @@ class EdgePoint with EquatableMixin { /// Quote. final double quote; + /// Returns a copy of this [EdgePoint] with the given values. + EdgePoint copyWith({ + int? epoch, + double? quote, + }) { + return EdgePoint( + epoch: epoch ?? this.epoch, + quote: quote ?? this.quote, + ); + } + @override List get props => [epoch, quote]; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 11cc12e6d..a957cf6f9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -20,10 +20,15 @@ class LineAddingPreviewMobile required super.interactiveLayerBehaviour, required super.interactableDrawing, }) { - // TODO(Ramin): use center of the screen which is received from interactive layer instead of hardcoded values + final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; + final Size? layerSize = interactiveLayer.layerSize; + + final double centerX = layerSize != null ? layerSize.width / 2 : 0; + final double centerY = layerSize != null ? layerSize.height / 2 : 0; + interactableDrawing.startPoint = EdgePoint( - epoch: interactiveLayerBehaviour.interactiveLayer.epochFromX(200), - quote: interactiveLayerBehaviour.interactiveLayer.quoteFromY(200), + epoch: interactiveLayer.epochFromX(centerX), + quote: interactiveLayer.quoteFromY(centerY), ); } @@ -118,10 +123,7 @@ class LineAddingPreviewMobile ); } else if (interactableDrawing.startPoint != null && interactableDrawing.endPoint == null) { - interactableDrawing.endPoint = EdgePoint( - epoch: epochFromX(200), - quote: quoteFromY(200), - ); + interactableDrawing.endPoint = interactableDrawing.startPoint!.copyWith(); } else if (interactableDrawing.startPoint != null && interactableDrawing.endPoint != null) { onDone(); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 4ffc8e0a5..7d628a5a8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -240,8 +240,6 @@ class _InteractiveLayerGestureHandlerState extends State<_InteractiveLayerGestureHandler> with SingleTickerProviderStateMixin implements InteractiveLayerBase { - // InteractableDrawing? _selectedDrawing; - late AnimationController _stateChangeController; static const Curve _stateChangeCurve = Curves.easeInOut; final InteractionNotifier _interactionNotifier = InteractionNotifier(); @@ -250,10 +248,21 @@ class _InteractiveLayerGestureHandlerState AnimationController? get stateChangeAnimationController => _stateChangeController; + final GlobalKey _layerKey = GlobalKey(); + + Size? _size; + @override void initState() { super.initState(); + WidgetsFlutterBinding.ensureInitialized().addPostFrameCallback((_) { + setState(() { + _size = + (_layerKey.currentContext?.findRenderObject() as RenderBox?)?.size; + }); + }); + widget.interactiveLayerBehaviour.init( interactiveLayer: this, onUpdate: () => setState(() {}), @@ -276,13 +285,6 @@ class _InteractiveLayerGestureHandlerState widget.addingDrawingTool != oldWidget.addingDrawingTool) { widget.interactiveLayerBehaviour .onAddDrawingTool(widget.addingDrawingTool!); - // updateStateTo( - // InteractiveAddingToolState( - // widget.addingDrawingTool!, - // interactiveLayer: this, - // ), - // StateChangeAnimationDirection.forward, - // ); } } @@ -290,13 +292,6 @@ class _InteractiveLayerGestureHandlerState Future animateStateChange( StateChangeAnimationDirection direction) async { await _runAnimation(direction); - // if (waitForAnimation) { - // await _runAnimation(direction); - // setState(() => _interactiveState = state); - // } else { - // unawaited(_runAnimation(direction)); - // setState(() => _interactiveState = state); - // } } Future _runAnimation(StateChangeAnimationDirection direction) async { @@ -336,6 +331,7 @@ class _InteractiveLayerGestureHandlerState // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. child: RepaintBoundary( + key: _layerKey, child: MultipleAnimatedBuilder( animations: [_stateChangeController, _interactionNotifier], builder: (_, __) { @@ -439,4 +435,7 @@ class _InteractiveLayerGestureHandlerState @override void onSaveDrawing(InteractableDrawing drawing) => widget.onSaveDrawingChange?.call(drawing); + + @override + Size? get layerSize => _size; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 7b9b857e5..c856a7b45 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -49,6 +49,9 @@ abstract class InteractiveLayerBase { /// Converts quote to y. QuoteToY get quoteToY; + /// The size of the interactive layer. + Size? get layerSize; + /// Clears the adding drawing. void clearAddingDrawing(); From a0b35c9ab5c4096a0978b058fe6689c48eb60d03 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 15:48:39 +0800 Subject: [PATCH 137/311] paint horizontal line preview as dashed --- .../interactive_layer/helpers/paint_helpers.dart | 6 +++--- .../horizontal_line_adding_preview_mobile.dart | 11 ++++++++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 201e7f8e6..b1a2b99cd 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -29,19 +29,19 @@ void drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { // Draw the dashed lines canvas ..drawPath( - _dashPath(horizontalPath, + dashPath(horizontalPath, dashArray: CircularIntervalList([5, 5])), guidesPaint, ) ..drawPath( - _dashPath(verticalPath, + dashPath(verticalPath, dashArray: CircularIntervalList([5, 5])), guidesPaint, ); } /// Creates a dashed path from a regular path -Path _dashPath( +Path dashPath( Path source, { required CircularIntervalList dashArray, }) { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index 9a82f9877..4b91bd333 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -3,6 +3,7 @@ import 'dart:ui'; 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/edge_point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:flutter/gestures.dart'; @@ -64,9 +65,13 @@ class HorizontalLineAddingPreviewMobile if (interactableDrawing.startPoint != null) { final double lineY = quoteToY(interactableDrawing.startPoint!.quote); - canvas.drawLine( - Offset(0, lineY), - Offset(size.width, lineY), + final Path horizontalPath = Path() + ..moveTo(0, lineY) + ..lineTo(size.width, lineY); + + canvas.drawPath( + dashPath(horizontalPath, + dashArray: CircularIntervalList([5, 5])), Paint() ..color = interactableDrawing.config.lineStyle.color ..style = PaintingStyle.stroke, From 195d3385d8b6111ac456e6c0b1d3f83cf8d80e21 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 15:56:24 +0800 Subject: [PATCH 138/311] remove a redundant method --- .../trend_line/adding_tool_alignment_cross_hair.dart | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index e44a87adc..e2469f8fa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -48,16 +48,6 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { @override String get id => 'alignment-cross-hair'; - @override - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) {} - @override void onDragEnd(DragEndDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} From 2b5fa106da3899fdcfc1bc1fa97f6368588e52b9 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 21:18:54 +0800 Subject: [PATCH 139/311] code cleanup :recycle: --- .../trend_line_adding_preview_desktop.dart | 22 ++-- .../trend_line_adding_preview_mobile.dart | 110 ++++++++---------- 2 files changed, 61 insertions(+), 71 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index 9f71efb12..80d1aafcd 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -47,22 +47,22 @@ class LineAddingPreviewDesktop final LineStyle lineStyle = interactableDrawing.config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - if (interactableDrawing.startPoint != null) { - drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, - paintStyle, lineStyle); + final EdgePoint? startPoint = interactableDrawing.startPoint; + + if (startPoint != null) { + drawPoint(startPoint, epochToX, quoteToY, canvas, paintStyle, lineStyle); drawPointAlignmentGuides( - canvas, - size, - Offset(epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote))); + canvas, + size, + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)), + ); if (_hoverPosition != null) { // endPoint doesn't exist yet and it means we're creating this line. // Drawing preview line from startPoint to hoverPosition. - final Offset startPosition = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); + final Offset startPosition = + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); + canvas.drawLine(startPosition, _hoverPosition!, paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); drawPointAlignmentGuides(canvas, size, _hoverPosition!); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index a957cf6f9..a5e3ad882 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -34,20 +34,22 @@ class LineAddingPreviewMobile @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { + final EdgePoint? startPoint = interactableDrawing.startPoint; + final EdgePoint? endPoint = interactableDrawing.endPoint; + + if (startPoint != null && endPoint == null) { final startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), + epochToX(startPoint.epoch), + quoteToY(startPoint.quote), ); if ((offset - startOffset).distance <= hitTestMargin) { return true; } - } else if (interactableDrawing.endPoint != null) { + } else if (endPoint != null) { final endOffset = Offset( - epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote), + epochToX(endPoint.epoch), + quoteToY(endPoint.quote), ); if ((offset - endOffset).distance <= hitTestMargin) { @@ -68,34 +70,27 @@ class LineAddingPreviewMobile ) { final LineStyle lineStyle = interactableDrawing.config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - // Check if this drawing is selected - - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - drawPoint(interactableDrawing.startPoint!, epochToX, quoteToY, canvas, - paintStyle, lineStyle); - drawPointAlignmentGuides( - canvas, - size, - Offset(epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote))); - } else if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint != null) { - drawPoint(interactableDrawing.endPoint!, epochToX, quoteToY, canvas, - paintStyle, lineStyle); - drawPointAlignmentGuides( - canvas, - size, - Offset(epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote))); - final startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); - final endOffset = Offset( - epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote), - ); + + final EdgePoint? startPoint = interactableDrawing.startPoint; + final EdgePoint? endPoint = interactableDrawing.endPoint; + + if (startPoint != null && endPoint == null) { + // Start point is spawned at the chart, user can move it, we should show + // alignment cross-hair on start point. + drawPoint(startPoint, epochToX, quoteToY, canvas, paintStyle, lineStyle); + drawPointAlignmentGuides(canvas, size, + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote))); + } else if (startPoint != null && endPoint != null) { + // End point is also spawned at the chart, user can move it, we should + // show alignment cross-hair on end point. + drawPoint(endPoint, epochToX, quoteToY, canvas, paintStyle, lineStyle); + + final startOffset = + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); + final endOffset = + Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); + + drawPointAlignmentGuides(canvas, size, endOffset); // Use glowy paint style if selected, otherwise use normal paint style final Paint paint = drawingState.contains(DrawingToolState.selected) || @@ -116,16 +111,17 @@ class LineAddingPreviewMobile QuoteToY quoteToY, VoidCallback onDone, ) { - if (interactableDrawing.startPoint == null) { + final EdgePoint? startPoint = interactableDrawing.startPoint; + final EdgePoint? endPoint = interactableDrawing.endPoint; + + if (startPoint == null) { interactableDrawing.startPoint = EdgePoint( epoch: epochFromX(details.localPosition.dx), quote: quoteFromY(details.localPosition.dy), ); - } else if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { - interactableDrawing.endPoint = interactableDrawing.startPoint!.copyWith(); - } else if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint != null) { + } else if (endPoint == null) { + interactableDrawing.endPoint = startPoint.copyWith(); + } else { onDone(); } } @@ -138,13 +134,13 @@ class LineAddingPreviewMobile EpochToX epochToX, QuoteToY quoteToY, ) { - if (interactableDrawing.startPoint != null && - interactableDrawing.endPoint == null) { + final EdgePoint? startPoint = interactableDrawing.startPoint; + final EdgePoint? endPoint = interactableDrawing.endPoint; + + if (startPoint != null && endPoint == null) { // If we're dragging the start point, we need to update its position - final Offset startOffset = Offset( - epochToX(interactableDrawing.startPoint!.epoch), - quoteToY(interactableDrawing.startPoint!.quote), - ); + final Offset startOffset = + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); // Apply the delta to get the new screen position final Offset newOffset = startOffset + details.delta; @@ -154,16 +150,12 @@ class LineAddingPreviewMobile final double newQuote = quoteFromY(newOffset.dy); // Update the start point - interactableDrawing.startPoint = EdgePoint( - epoch: newEpoch, - quote: newQuote, - ); - } else if (interactableDrawing.endPoint != null) { + interactableDrawing.startPoint = + EdgePoint(epoch: newEpoch, quote: newQuote); + } else if (endPoint != null) { // If we're dragging the start point, we need to update its position - final Offset endOffset = Offset( - epochToX(interactableDrawing.endPoint!.epoch), - quoteToY(interactableDrawing.endPoint!.quote), - ); + final Offset endOffset = + Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); // Apply the delta to get the new screen position final Offset newOffset = endOffset + details.delta; @@ -173,10 +165,8 @@ class LineAddingPreviewMobile final double newQuote = quoteFromY(newOffset.dy); // Update the start point - interactableDrawing.endPoint = EdgePoint( - epoch: newEpoch, - quote: newQuote, - ); + interactableDrawing.endPoint = + EdgePoint(epoch: newEpoch, quote: newQuote); } } From c4623cf236ec41836fc6e405b3bc57a000d49854 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 21:31:48 +0800 Subject: [PATCH 140/311] chore: code cleanup :recycle: --- .../trend_line_adding_preview_desktop.dart | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index 80d1aafcd..17474826e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -24,15 +24,14 @@ class LineAddingPreviewDesktop Offset? _hoverPosition; - final AddingToolAlignmentCrossHair _addingToolAlignmentCrossHair = + final AddingToolAlignmentCrossHair _crossHair = AddingToolAlignmentCrossHair(); @override void onHover(PointerHoverEvent event, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { _hoverPosition = event.localPosition; - _addingToolAlignmentCrossHair.onHover( - event, epochFromX, quoteFromY, epochToX, quoteToY); + _crossHair.onHover(event, epochFromX, quoteFromY, epochToX, quoteToY); } @override @@ -51,11 +50,6 @@ class LineAddingPreviewDesktop if (startPoint != null) { drawPoint(startPoint, epochToX, quoteToY, canvas, paintStyle, lineStyle); - drawPointAlignmentGuides( - canvas, - size, - Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)), - ); if (_hoverPosition != null) { // endPoint doesn't exist yet and it means we're creating this line. @@ -65,7 +59,6 @@ class LineAddingPreviewDesktop canvas.drawLine(startPosition, _hoverPosition!, paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness)); - drawPointAlignmentGuides(canvas, size, _hoverPosition!); } } @@ -74,7 +67,7 @@ class LineAddingPreviewDesktop paintStyle, lineStyle); } - _addingToolAlignmentCrossHair.paint( + _crossHair.paint( canvas, size, epochToX, quoteToY, animationInfo, drawingState); } From 31f711c38973c962fc2a19b6f36e3458f33b3cf7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 21:48:05 +0800 Subject: [PATCH 141/311] chore: code cleanup :recycle: --- lib/src/deriv_chart/chart/chart.dart | 2 +- lib/src/deriv_chart/chart/main_chart.dart | 3 +- lib/src/deriv_chart/deriv_chart.dart | 4 + .../drawing_adding_preview.dart | 2 +- .../horizontal_line_interactable_drawing.dart | 3 +- .../interactable_drawing.dart | 23 +--- .../trend_line/line_interactable_drawing.dart | 3 +- .../interactive_layer/interactive_layer.dart | 1 + .../interactive_layer_base.dart | 121 ------------------ .../interactive_layer_behaviour.dart | 99 ++++++++++++++ .../interactive_layer_desktop_behaviour.dart | 14 ++ .../interactive_layer_mobile_behaviour.dart | 29 +++++ .../interactive_state.dart | 2 + 13 files changed, 159 insertions(+), 147 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart diff --git a/lib/src/deriv_chart/chart/chart.dart b/lib/src/deriv_chart/chart/chart.dart index e9aed942f..b576d0d6c 100644 --- a/lib/src/deriv_chart/chart/chart.dart +++ b/lib/src/deriv_chart/chart/chart.dart @@ -2,7 +2,6 @@ import 'package:collection/collection.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; import 'package:deriv_chart/src/deriv_chart/chart/mobile_chart_frame_dividers.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/theme/dimens.dart'; import 'package:flutter/foundation.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; @@ -22,6 +21,7 @@ import '../../misc/chart_controller.dart'; import '../../models/tick.dart'; import '../../theme/chart_default_dark_theme.dart'; import '../../theme/chart_theme.dart'; +import '../interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; import 'bottom_chart.dart'; import 'bottom_chart_mobile.dart'; import 'data_visualization/annotations/chart_annotation.dart'; diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 1b39cc46c..f93035c36 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -2,7 +2,6 @@ import 'package:collection/collection.dart' show IterableExtension; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; @@ -19,6 +18,8 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import '../drawing_tool_chart/drawing_tool_chart.dart'; import '../interactive_layer/interactive_layer.dart'; +import '../interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; +import '../interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'basic_chart.dart'; import 'crosshair/crosshair_area.dart'; import 'multiple_animated_builder.dart'; diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 0d63ed0f0..dca491f66 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -25,6 +25,10 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:shared_preferences/shared_preferences.dart'; +import 'interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; +import 'interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import 'interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; + /// A wrapper around the [Chart] which handles adding indicators to the chart. class DerivChart extends StatefulWidget { /// Initializes diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart index 9cbdca5ff..38117dbab 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -2,12 +2,12 @@ import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; /// A preview of a drawing that is being added to the [InteractiveLayer]. /// diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 6de48fc91..dda410ef7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -7,7 +7,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -15,6 +14,8 @@ import 'package:flutter/widgets.dart'; import '../../enums/drawing_tool_state.dart'; import '../../helpers/paint_helpers.dart'; +import '../../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import '../../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import '../drawing_v2.dart'; import '../interactable_drawing.dart'; import 'horizontal_line_adding_preview_mobile.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index ddd73bec8..f03274d26 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,5 +1,4 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -7,6 +6,8 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import '../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'drawing_adding_preview.dart'; import 'drawing_v2.dart'; @@ -36,26 +37,6 @@ abstract class InteractableDrawing @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); - /// The tap event that is called when the [InteractableDrawing] is in adding - /// state. - /// - /// the drawing can use the tap to capture and create the coordinates required - /// for its shape. - /// - /// [onDone] is a callback that should be called when the drawing is done - /// adding. each drawing tool will know when it's done adding. For example - /// a line tool will be done when the user taps on the second point of the - /// line or for horizontal line tool when the user taps one time. - @override - void onCreateTap( - TapUpDetails details, - EpochFromX epochFromX, - QuoteFromY quoteFromY, - EpochToX epochToX, - QuoteToY quoteToY, - VoidCallback onDone, - ) {} - /// Called when the drawing tool dragging is started. @override void onDragStart( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart index 0ca1fcd1e..63b9608ec 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart @@ -11,7 +11,8 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; import '../../helpers/paint_helpers.dart'; -import '../../interactive_layer_base.dart'; +import '../../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import '../../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import '../drawing_adding_preview.dart'; import '../drawing_v2.dart'; import '../interactable_drawing.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 7d628a5a8..b9975bd24 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -21,6 +21,7 @@ import 'interactable_drawing_custom_painter.dart'; import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; import 'enums/state_change_direction.dart'; +import 'interactive_layer_behaviours/interactive_layer_behaviour.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index c856a7b45..876140503 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -3,16 +3,10 @@ import 'dart:async'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:flutter/animation.dart'; -import 'package:flutter/gestures.dart'; import '../chart/data_visualization/chart_data.dart'; -import 'enums/drawing_tool_state.dart'; -import 'interactable_drawings/drawing_adding_preview.dart'; -import 'interactable_drawings/drawing_v2.dart'; import 'interactable_drawings/interactable_drawing.dart'; -import 'interactive_layer_states/interactive_adding_tool_state.dart'; import 'interactive_layer_states/interactive_normal_state.dart'; -import 'interactive_layer_states/interactive_state.dart'; import 'enums/state_change_direction.dart'; /// The interactive layer base class interface. @@ -63,118 +57,3 @@ abstract class InteractiveLayerBase { /// repository. void onSaveDrawing(InteractableDrawing drawing); } - -/// The base class for managing the interactive layer. -abstract class InteractiveLayerBehaviour { - late InteractiveState _interactiveState; - - /// Initializes the interactive layer manager. - void init({ - required InteractiveLayerBase interactiveLayer, - required VoidCallback onUpdate, - }) { - this.interactiveLayer = interactiveLayer; - this.onUpdate = onUpdate; - _interactiveState = InteractiveNormalState(interactiveLayerBehaviour: this); - } - - /// Return the adding preview of the [drawing] we're currently adding for this - /// Behaviour. - DrawingAddingPreview getAddingDrawingPreview(InteractableDrawing drawing); - - /// Updates the interactive layer state to the new state. - Future updateStateTo( - InteractiveState newState, - StateChangeAnimationDirection direction, { - bool waitForAnimation = false, - }) async { - if (waitForAnimation) { - await interactiveLayer.animateStateChange(direction); - - _interactiveState = newState; - onUpdate(); - } else { - unawaited(interactiveLayer.animateStateChange(direction)); - - _interactiveState = newState; - onUpdate(); - } - } - - /// Handles the addition of a drawing tool. - void onAddDrawingTool(DrawingToolConfig drawingTool) { - updateStateTo( - InteractiveAddingToolState(drawingTool, interactiveLayerBehaviour: this), - StateChangeAnimationDirection.forward, - ); - } - - /// The interactive layer that this manager is managing. - late final InteractiveLayerBase interactiveLayer; - - /// The callback that is called when the interactive layer needs to be - late final VoidCallback onUpdate; - - /// The drawings of the interactive layer. - Set getToolState(DrawingV2 drawing) => - _interactiveState.getToolState(drawing); - - /// The drawings of the interactive layer. - List get previewDrawings => _interactiveState.previewDrawings; - - /// Handles tap event. - void onTap(TapUpDetails details) { - _interactiveState.onTap(details); - } - - /// Handles pan update event. - void onPanUpdate(DragUpdateDetails details) { - _interactiveState.onPanUpdate(details); - } - - /// Handles pan end event. - void onPanEnd(DragEndDetails details) { - _interactiveState.onPanEnd(details); - } - - /// Handles pan start event. - void onPanStart(DragStartDetails details) { - _interactiveState.onPanStart(details); - } - - /// Handles hover event. - void onHover(PointerHoverEvent event) { - _interactiveState.onHover(event); - } -} - -/// The mobile-specific implementation of the interactive layer behaviour. -class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { - @override - void onAddDrawingTool(DrawingToolConfig drawingTool) { - final newState = InteractiveAddingToolStateMobile( - drawingTool, - interactiveLayerBehaviour: this, - ); - - updateStateTo( - newState, - StateChangeAnimationDirection.forward, - ); - } - - @override - DrawingAddingPreview getAddingDrawingPreview( - InteractableDrawing drawing, - ) => - drawing.getAddingPreviewForMobileBehaviour(this); -} - -/// The Desktop-specific implementation of the interactive layer behaviour. -class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour { - @override - DrawingAddingPreview getAddingDrawingPreview( - InteractableDrawing drawing, - ) => - drawing.getAddingPreviewForDesktopBehaviour(this); -} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart new file mode 100644 index 000000000..91f40b337 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -0,0 +1,99 @@ +import 'dart:async'; +import 'dart:ui'; + +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/gestures.dart'; + +import '../enums/drawing_tool_state.dart'; +import '../enums/state_change_direction.dart'; +import '../interactable_drawings/drawing_adding_preview.dart'; +import '../interactable_drawings/drawing_v2.dart'; +import '../interactable_drawings/interactable_drawing.dart'; +import '../interactive_layer_base.dart'; +import '../interactive_layer_states/interactive_adding_tool_state.dart'; +import '../interactive_layer_states/interactive_normal_state.dart'; +import '../interactive_layer_states/interactive_state.dart'; + +/// The base class for managing the interactive layer. +abstract class InteractiveLayerBehaviour { + late InteractiveState _interactiveState; + + /// Initializes the interactive layer manager. + void init({ + required InteractiveLayerBase interactiveLayer, + required VoidCallback onUpdate, + }) { + this.interactiveLayer = interactiveLayer; + this.onUpdate = onUpdate; + _interactiveState = InteractiveNormalState(interactiveLayerBehaviour: this); + } + + /// Return the adding preview of the [drawing] we're currently adding for this + /// Behaviour. + DrawingAddingPreview getAddingDrawingPreview(InteractableDrawing drawing); + + /// Updates the interactive layer state to the new state. + Future updateStateTo( + InteractiveState newState, + StateChangeAnimationDirection direction, { + bool waitForAnimation = false, + }) async { + if (waitForAnimation) { + await interactiveLayer.animateStateChange(direction); + + _interactiveState = newState; + onUpdate(); + } else { + unawaited(interactiveLayer.animateStateChange(direction)); + + _interactiveState = newState; + onUpdate(); + } + } + + /// Handles the addition of a drawing tool. + void onAddDrawingTool(DrawingToolConfig drawingTool) { + updateStateTo( + InteractiveAddingToolState(drawingTool, interactiveLayerBehaviour: this), + StateChangeAnimationDirection.forward, + ); + } + + /// The interactive layer that this manager is managing. + late final InteractiveLayerBase interactiveLayer; + + /// The callback that is called when the interactive layer needs to be + late final VoidCallback onUpdate; + + /// The drawings of the interactive layer. + Set getToolState(DrawingV2 drawing) => + _interactiveState.getToolState(drawing); + + /// The drawings of the interactive layer. + List get previewDrawings => _interactiveState.previewDrawings; + + /// Handles tap event. + void onTap(TapUpDetails details) { + _interactiveState.onTap(details); + } + + /// Handles pan update event. + void onPanUpdate(DragUpdateDetails details) { + _interactiveState.onPanUpdate(details); + } + + /// Handles pan end event. + void onPanEnd(DragEndDetails details) { + _interactiveState.onPanEnd(details); + } + + /// Handles pan start event. + void onPanStart(DragStartDetails details) { + _interactiveState.onPanStart(details); + } + + /// Handles hover event. + void onHover(PointerHoverEvent event) { + _interactiveState.onHover(event); + } +} \ No newline at end of file diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart new file mode 100644 index 000000000..4ea952180 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart @@ -0,0 +1,14 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; + +import '../interactable_drawings/drawing_adding_preview.dart'; +import '../interactable_drawings/interactable_drawing.dart'; +import 'interactive_layer_behaviour.dart'; + +/// The Desktop-specific implementation of the interactive layer behaviour. +class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour { + @override + DrawingAddingPreview getAddingDrawingPreview( + InteractableDrawing drawing, + ) => + drawing.getAddingPreviewForDesktopBehaviour(this); +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart new file mode 100644 index 000000000..62295ed3e --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart @@ -0,0 +1,29 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; + +import '../enums/state_change_direction.dart'; +import '../interactable_drawings/drawing_adding_preview.dart'; +import '../interactable_drawings/interactable_drawing.dart'; +import '../interactive_layer_states/interactive_adding_tool_state.dart'; +import 'interactive_layer_behaviour.dart'; + +/// The mobile-specific implementation of the interactive layer behaviour. +class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { + @override + void onAddDrawingTool(DrawingToolConfig drawingTool) { + final newState = InteractiveAddingToolStateMobile( + drawingTool, + interactiveLayerBehaviour: this, + ); + + updateStateTo( + newState, + StateChangeAnimationDirection.forward, + ); + } + + @override + DrawingAddingPreview getAddingDrawingPreview( + InteractableDrawing drawing, + ) => + drawing.getAddingPreviewForMobileBehaviour(this); +} \ No newline at end of file diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart index 2c0dfac75..276e087df 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart @@ -6,6 +6,7 @@ import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/drawing_v2.dart'; import '../interactable_drawings/interactable_drawing.dart'; import '../interactive_layer_base.dart'; +import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; /// The state of the interactive layer. /// @@ -51,6 +52,7 @@ abstract class InteractiveState { /// access layer properties and methods. final InteractiveLayerBehaviour interactiveLayerBehaviour; + /// The interactive layer that owns this state. InteractiveLayerBase get interactiveLayer => interactiveLayerBehaviour.interactiveLayer; From 7511a0db57e735d66473a506c97bb4e67bf41548 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 9 May 2025 21:50:28 +0800 Subject: [PATCH 142/311] chore: code cleanup :recycle: --- .../interactive_layer/interactable_drawings/drawing_v2.dart | 4 +--- .../trend_line/trend_line_adding_preview_desktop.dart | 2 ++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index 61ccd42d9..208a34bb1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -10,7 +10,7 @@ import '../enums/drawing_tool_state.dart'; /// The margin for hit testing. const double hitTestMargin = 32; -/// Base interface for any drawing on the [InteractiveLayer] and can be +/// Base interface for any drawing painted on the [InteractiveLayer] and can be /// interacted with by the user. /// /// This base class defines the life-cycle functionality of the drawings in @@ -27,8 +27,6 @@ abstract class DrawingV2 { /// Returns `true` if the drawing tool is hit by the given offset. bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); - - /// Called when the drawing tool dragging is started. void onDragStart( DragStartDetails details, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index 17474826e..e1d14f1b9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -24,6 +24,7 @@ class LineAddingPreviewDesktop Offset? _hoverPosition; + /// The cross-hair that is following mouse cursor and is used for alignment. final AddingToolAlignmentCrossHair _crossHair = AddingToolAlignmentCrossHair(); @@ -31,6 +32,7 @@ class LineAddingPreviewDesktop void onHover(PointerHoverEvent event, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { _hoverPosition = event.localPosition; + _crossHair.onHover(event, epochFromX, quoteFromY, epochToX, quoteToY); } From a7b95e3b873d39b5d09491bd7a8dd46200a3fc3d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 12 May 2025 22:27:00 +0800 Subject: [PATCH 143/311] chore: add some docs --- .../drawing_adding_preview.dart | 93 ++++++++++++++++--- 1 file changed, 78 insertions(+), 15 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart index 38117dbab..788d5856a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -11,39 +11,82 @@ import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; /// A preview of a drawing that is being added to the [InteractiveLayer]. /// -/// This tool is only shown during the lifetime of the drawing addition. -/// It displays a preview of the drawing along with any alignment lines or -/// hints. +/// This class serves as a temporary visual representation during the drawing +/// tool creation process. It's responsible for: /// -/// Once the drawing is added, this preview is removed. +/// 1. Displaying a preview of the drawing being created +/// 2. Showing alignment guides, hints, or other visual aids +/// 3. Handling user interactions during the drawing creation process +/// 4. Coordinating with the [InteractiveLayerBehaviour] to manage +/// platform-specific interactions (mobile vs desktop) +/// +/// The preview exists only during the drawing addition lifecycle and is removed +/// once the drawing is fully created and added to the chart. Different drawing +/// tools will implement their own specific preview behaviors by extending this +/// class. +/// +/// See also: +/// * [InteractableDrawing], which this preview helps to create +/// * [DrawingV2], the base interface for all drawings abstract class DrawingAddingPreview< T extends InteractableDrawing> implements DrawingV2 { /// Initializes the [DrawingAddingPreview]. + /// + /// Creates a preview instance that will help visualize and manage the creation + /// of a new drawing tool on the chart. DrawingAddingPreview({ required this.interactiveLayerBehaviour, required this.interactableDrawing, }); /// The current interactive layer behaviour which is active and defines how - /// this preview should behave. Since the behaviour of a adding preview can - /// be different depending on the [InteractiveLayerBehaviour] (desktop or - /// mobile). + /// this preview should behave. + /// + /// The preview's behavior can differ significantly between platforms (desktop + /// or mobile) due to different input methods: + /// - On desktop: Typically uses mouse movements, clicks, and hover events + /// - On mobile: Uses touch gestures and taps + /// + /// This field provides access to the appropriate behavior implementation for + /// the current platform. final InteractiveLayerBehaviour interactiveLayerBehaviour; /// The reference to the [InteractableDrawing] instance of the drawing tool /// that is going to be added. + /// + /// This is the actual drawing object being created. The preview uses this + /// reference to: + /// 1. Update the drawing's properties as the user interacts with the preview + /// 2. Access configuration settings like colors, line styles, etc. + /// + /// When the drawing creation is complete, this instance will be added to + /// the interactive layer as a permanent drawing. final T interactableDrawing; - /// The tap event that is called when user taps on a position on the screen - /// when we're in adding state. + /// Handles tap events during the drawing creation process. /// - /// the drawing can use the tap to capture and create the coordinates required - /// for its shape. + /// This method is called when the user taps on the chart while in the drawing + /// addition state. It allows the drawing preview to: /// - /// [onDone] is a callback that should be called when the drawing is done - /// adding. each drawing tool will know when it's done adding. For example - /// a line tool will be done when the user taps on the second point of the - /// line or for horizontal line tool when the user taps one time. + /// 1. Capture coordinates needed to define the drawing's shape and position + /// 2. Update the underlying [interactableDrawing] with these coordinates + /// 3. Determine when the drawing creation is complete. + /// + /// Different drawing tools require different numbers of taps to complete: + /// - A horizontal line may require just one tap to define its position + /// - A trend line requires two taps to define start and end points + /// - A rectangle or triangle may require multiple taps to define vertices + /// + /// When the drawing has received all necessary inputs, it should call the + /// [onDone] callback to signal that creation is complete. + /// + /// Parameters: + /// - [details]: Information about the tap event + /// - [epochFromX]: Function to convert X coordinate to epoch (timestamp) + /// - [quoteFromY]: Function to convert Y coordinate to price/quote value + /// - [epochToX]: Function to convert epoch (timestamp) to X coordinate + /// - [quoteToY]: Function to convert price/quote value to Y coordinate + /// - [onDone]: Callback to invoke when drawing creation is complete void onCreateTap( TapUpDetails details, EpochFromX epochFromX, @@ -53,6 +96,7 @@ abstract class DrawingAddingPreview< VoidCallback onDone, ); + /// Handles the start of a drag gesture during drawing creation. @override void onDragStart( DragStartDetails details, @@ -62,6 +106,7 @@ abstract class DrawingAddingPreview< QuoteToY quoteToY, ) {} + /// Handles updates during a drag gesture for drawing creation. @override void onDragUpdate( DragUpdateDetails details, @@ -71,6 +116,7 @@ abstract class DrawingAddingPreview< QuoteToY quoteToY, ) {} + /// Handles the end of a drag gesture during drawing creation. @override void onDragEnd( DragEndDetails details, @@ -80,6 +126,7 @@ abstract class DrawingAddingPreview< QuoteToY quoteToY, ) {} + /// Handles hover events during drawing creation (desktop platforms). @override void onHover( PointerHoverEvent event, @@ -89,9 +136,25 @@ abstract class DrawingAddingPreview< QuoteToY quoteToY, ) {} + /// Determines if the drawing preview is within the current chart viewport. + /// + /// For drawing previews, this always returns `true` because the preview + /// is always be visible during the drawing creation process. @override bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => true; + /// Determines if the drawing preview needs to be repainted. + /// + /// For drawing previews, this always returns `true` because the preview + /// should be repainted on every frame during the drawing creation process. + /// This ensures that the preview is always up-to-date with the latest user + /// interactions and provides smooth visual feedback. + /// + /// Parameters: + /// - [drawingState]: The current state of the drawing tool + /// - [oldDrawing]: The previous version of this drawing + /// + /// Returns `true` to ensure the preview is always repainted. @override bool shouldRepaint( Set drawingState, From f6e628737a8e78fa50d207782cac1f8bef7b3c46 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 12 May 2025 23:06:50 +0800 Subject: [PATCH 144/311] chore: improve documentations --- doc/interactive_layer.md | 110 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 109 insertions(+), 1 deletion(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index 0b6fe7243..978988dfc 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -111,6 +111,34 @@ Each specific drawing tool (like `LineInteractableDrawing`) extends this class t - Handling drag operations in a way that makes sense for its geometry - Painting itself with appropriate visual styles based on its state +## DrawingAddingPreview + +The `DrawingAddingPreview` class is a specialized component that handles the preview and creation process of drawing tools. It serves as a temporary visual representation during the drawing tool creation process and is responsible for: + +1. Displaying a preview of the drawing being created +2. Showing alignment guides, hints, or other visual aids +3. Handling user interactions during the drawing creation process +4. Coordinating with the `InteractiveLayerBehaviour` to manage platform-specific interactions + +The preview exists only during the drawing addition lifecycle and is removed once the drawing is fully created and added to the chart. Different drawing tools implement their own specific preview behaviors by extending this class. + +Key characteristics of `DrawingAddingPreview`: + +- It implements the `DrawingV2` interface, just like `InteractableDrawing` +- It holds a reference to the actual `InteractableDrawing` instance being created +- It works with `InteractiveLayerBehaviour` to handle platform-specific interactions +- It provides the `onCreateTap` method that captures user taps to define the drawing's shape +- Different drawing tools require different numbers of taps to complete (e.g., a horizontal line may require just one tap, while a trend line requires two taps) + +### Platform-Specific Behaviors + +The Interactive Layer supports different behaviors based on the platform (desktop or mobile) through the `InteractiveLayerBehaviour` abstract class: + +- **Desktop Behavior**: Optimized for mouse interactions, including hover events and precise clicking +- **Mobile Behavior**: Optimized for touch interactions, with appropriate touch targets and gestures + +Each drawing tool can provide different preview implementations for desktop and mobile through the `getAddingPreviewForDesktopBehaviour` and `getAddingPreviewForMobileBehaviour` methods in `InteractableDrawing`. + ## Implementation Details The Interactive Layer uses a combination of gesture detectors and custom painters to: @@ -126,4 +154,84 @@ When a user interacts with the chart, the Interactive Layer: 3. The state object updates the affected drawing tools 4. The drawing tools are repainted with their new states and positions -This architecture provides a clean separation of concerns and makes it easy to add new interaction modes or drawing tool types. \ No newline at end of file +This architecture provides a clean separation of concerns and makes it easy to add new interaction modes or drawing tool types. + +## Interactive Layer Architecture Diagram + +The following diagram illustrates the architecture and flow of the Interactive Layer, including the relationships between InteractiveStates, InteractiveLayerBehaviour, and DrawingAddingPreview: + +``` ++-------------------------------------------+ +| InteractiveLayerBase | +| | +| +-----------------------------------+ | +| | InteractiveLayerBehaviour | | +| | | | +| | +-----------+ +------------+ | | +| | | Desktop | | Mobile | | | +| | | Behaviour | | Behaviour | | | +| | +-----------+ +------------+ | | +| +-----------------------------------+ | +| | | +| +-----------------------------------+ | +| | InteractiveState | | +| | | | +| | +-----------+ +------------+ | | +| | | Normal | | Selected | | | +| | | State |<-->| State | | | +| | +-----------+ +------------+ | | +| | ^ ^ | | +| | | | | | +| | v | | | +| | +-----------+ | | | +| | | Adding | | | | +| | | State |---------->+ | | +| | +-----------+ | | +| +-----------------------------------+ | +| | | ++-------------------------------------------+ + | + v ++-------------------------------------------+ +| Drawing Tool Creation | +| | +| +-----------------------------------+ | +| | DrawingAddingPreview | | +| | | | +| | +-----------+ +------------+ | | +| | | Desktop | | Mobile | | | +| | | Preview | | Preview | | | +| | +-----------+ +------------+ | | +| +-----------------------------------+ | +| | | +| v | +| +-----------------------------------+ | +| | InteractableDrawing | | +| | | | +| | (Line, Rectangle, Horizontal...) | | +| +-----------------------------------+ | ++-------------------------------------------+ +``` + +### Flow Explanation: + +1. **User Interaction**: User interactions (taps, drags, hovers) are captured by the `InteractiveLayerBase` + +2. **Platform-Specific Handling**: The `InteractiveLayerBehaviour` determines how interactions should be handled based on the platform (Desktop or Mobile) + +3. **State Management**: The current `InteractiveState` processes the interaction based on the current mode: + - `NormalState`: Default state for selecting or adding tools + - `SelectedState`: When a tool is selected for manipulation + - `AddingState`: When a new tool is being created + +4. **Drawing Creation**: When adding a new drawing: + - The appropriate `DrawingAddingPreview` is created based on the platform + - The preview handles user interactions to define the drawing's shape + - Once complete, the final `InteractableDrawing` is added to the chart + - The state transitions back to `NormalState` + +This architecture provides a flexible framework that: +- Separates platform-specific behavior from core functionality +- Manages state transitions cleanly +- Supports different drawing tools with minimal code duplication +- Provides appropriate previews during the drawing creation process \ No newline at end of file From c24124e1891b182e31b1e915ec9cc253459635d4 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 12 May 2025 23:25:56 +0800 Subject: [PATCH 145/311] update documentation --- doc/interactive_layer.md | 195 ++++++++++++++++++++++++--------------- 1 file changed, 123 insertions(+), 72 deletions(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index 978988dfc..0ce0b16aa 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -19,7 +19,7 @@ The Interactive Layer implements a state pattern to manage different interaction This is the default state when no drawing tools are selected or being added. In this state: - The user can tap on existing drawing tools to select them - The user can initiate adding a new drawing tool -- All drawing tools are in the `DrawingToolState.normal` state +- All drawing tools are in the `DrawingToolState.idle` state - Includes hover functionality through the `InteractiveHoverState` mixin ### InteractiveSelectedToolState @@ -52,16 +52,14 @@ This mixin-based approach allows hover functionality to be reused across differe The Interactive Layer manages transitions between states based on user interactions: -![Interactive Layer State Transitions](images/interactive_layer_2.png) - -The diagram above illustrates the state transitions in the Interactive Layer: - 1. **NormalState → SelectedToolState**: Occurs when the user taps on or starts dragging an existing drawing tool 2. **SelectedToolState → NormalState**: Occurs when the user taps outside the selected tool 3. **NormalState → AddingToolState**: Occurs when the user initiates adding a new drawing tool 4. **AddingToolState → NormalState**: Occurs when the new tool creation is complete -Note that both NormalState and SelectedToolState include the HoverState functionality through the mixin pattern, as shown in the nested boxes in the diagram. +Note that both NormalState and SelectedToolState include the HoverState functionality through the mixin pattern. + +For a comprehensive visual representation of the architecture and state transitions, see the Interactive Layer Architecture Diagram section below. ## DrawingToolState @@ -71,7 +69,7 @@ Each drawing tool on the chart has its own state, represented by the `DrawingToo enum DrawingToolState { /// Default state when the drawing tool is displayed on the chart /// but not being interacted with. - normal, + idle, /// The drawing tool is currently selected by the user. Selected tools /// typically show additional visual cues like handles or a glowy effect @@ -92,6 +90,12 @@ enum DrawingToolState { /// This state is active during drag operations when the user is /// modifying the tool's position. dragging, + + /// The drawing tool is being animated. + /// This state can be active, for example, when we're in the animation effect + /// of selecting or deselecting the drawing tool and the selection animation + /// is playing. + animating, } ``` @@ -161,77 +165,124 @@ This architecture provides a clean separation of concerns and makes it easy to a The following diagram illustrates the architecture and flow of the Interactive Layer, including the relationships between InteractiveStates, InteractiveLayerBehaviour, and DrawingAddingPreview: ``` -+-------------------------------------------+ -| InteractiveLayerBase | -| | -| +-----------------------------------+ | -| | InteractiveLayerBehaviour | | -| | | | -| | +-----------+ +------------+ | | -| | | Desktop | | Mobile | | | -| | | Behaviour | | Behaviour | | | -| | +-----------+ +------------+ | | -| +-----------------------------------+ | -| | | -| +-----------------------------------+ | -| | InteractiveState | | -| | | | -| | +-----------+ +------------+ | | -| | | Normal | | Selected | | | -| | | State |<-->| State | | | -| | +-----------+ +------------+ | | -| | ^ ^ | | -| | | | | | -| | v | | | -| | +-----------+ | | | -| | | Adding | | | | -| | | State |---------->+ | | -| | +-----------+ | | -| +-----------------------------------+ | -| | | -+-------------------------------------------+ - | - v -+-------------------------------------------+ -| Drawing Tool Creation | -| | -| +-----------------------------------+ | -| | DrawingAddingPreview | | -| | | | -| | +-----------+ +------------+ | | -| | | Desktop | | Mobile | | | -| | | Preview | | Preview | | | -| | +-----------+ +------------+ | | -| +-----------------------------------+ | -| | | -| v | -| +-----------------------------------+ | -| | InteractableDrawing | | -| | | | -| | (Line, Rectangle, Horizontal...) | | -| +-----------------------------------+ | -+-------------------------------------------+ +┌─────────────────────────────────────────────────────────────────────────┐ +│ USER INTERACTIONS │ +│ (Taps, Drags, Hovers, Gestures, etc.) │ +└───────────────────────────────────┬─────────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────────────────┐ +│ InteractiveLayerBase │ +│ │ +│ ┌─────────────────────────────────────────────────────────────────┐ │ +│ │ InteractiveLayerBehaviour │ │ +│ │ │ │ +│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ +│ │ │ Desktop Behaviour │ │ Mobile Behaviour │ │ │ +│ │ │ │ │ │ │ │ +│ │ │ • Mouse interactions │ │ • Touch interactions │ │ │ +│ │ │ • Hover support │ │ • Gesture recognition │ │ │ +│ │ │ • Precise positioning │ │ • Larger touch targets │ │ │ +│ │ └────────────────────────┘ └────────────────────────┘ │ │ +│ │ ▲ ▲ │ │ +│ │ │ │ │ │ +│ │ └────────────────┬───────────────┘ │ │ +│ │ │ │ │ +│ └──────────────────────────────────┼───────────────────────────────┘ │ +│ │ │ +│ ┌──────────────────────────────────┼───────────────────────────────┐ │ +│ │ InteractiveState │ │ │ +│ │ │ │ │ +│ │ ┌────────────────────────┐ │ ┌────────────────────────┐│ │ +│ │ │ Normal State │◄────┼────►│ Selected State ││ │ +│ │ │ │ │ │ ││ │ +│ │ │ • Default state │ │ │ • Tool is selected ││ │ +│ │ │ • Select tools │ │ │ • Show control points ││ │ +│ │ │ • Start adding tools │ │ │ • Enable manipulation ││ │ +│ │ └──────────┬─────────────┘ │ └─────────────▲──────────┘│ │ +│ │ │ │ │ │ │ +│ │ │ │ │ │ │ +│ │ ▼ │ │ │ │ +│ │ ┌────────────────────────┐ │ │ │ │ +│ │ │ Adding State │ │ │ │ │ +│ │ │ │ │ │ │ │ +│ │ │ • Creating new tool │─────┼───────────────────┘ │ │ +│ │ │ • Capture coordinates │ │ │ │ +│ │ │ • Show drawing preview │ │ │ │ +│ │ └────────────────────────┘ │ │ │ +│ └──────────────────────────────────┼───────────────────────────────┘ │ +└──────────────────────────────────────┼───────────────────────────────────┘ + │ + ▼ +┌─────────────────────────────────────────────────────────────────────────┐ +│ Drawing Tool Creation │ +│ │ +│ ┌─────────────────────────────────────────────────────────────────┐ │ +│ │ DrawingAddingPreview │ │ +│ │ │ │ +│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ +│ │ │ Desktop Preview │ │ Mobile Preview │ │ │ +│ │ │ │ │ │ │ │ +│ │ │ • Mouse-based creation │ │ • Touch-based creation │ │ │ +│ │ │ • Hover feedback │ │ • Tap sequence handling│ │ │ +│ │ │ • Precise positioning │ │ • Gesture recognition │ │ │ +│ │ └────────────┬───────────┘ └──────────┬─────────────┘ │ │ +│ │ │ │ │ │ +│ │ └────────────────┬───────────────┘ │ │ +│ │ │ │ │ +│ └────────────────────────────────┼────────────────────────────────┘ │ +│ │ │ +│ ▼ │ +│ ┌─────────────────────────────────────────────────────────────────┐ │ +│ │ InteractableDrawing │ │ +│ │ │ │ +│ │ ┌────────────────────────────────────────────────────────────┐ │ │ +│ │ │ Drawing Tool States │ │ │ +│ │ │ │ │ │ +│ │ │ See the DrawingToolState section for details on the │ │ │ +│ │ │ different states a drawing tool can be in (idle, selected, │ │ │ +│ │ │ hovered, adding, dragging, animating) │ │ │ +│ │ │ │ │ │ +│ │ └────────────────────────────────────────────────────────────┘ │ │ +│ │ │ │ +│ └─────────────────────────────────────────────────────────────────┘ │ +└─────────────────────────────────────────────────────────────────────────┘ ``` ### Flow Explanation: -1. **User Interaction**: User interactions (taps, drags, hovers) are captured by the `InteractiveLayerBase` - -2. **Platform-Specific Handling**: The `InteractiveLayerBehaviour` determines how interactions should be handled based on the platform (Desktop or Mobile) - -3. **State Management**: The current `InteractiveState` processes the interaction based on the current mode: - - `NormalState`: Default state for selecting or adding tools - - `SelectedState`: When a tool is selected for manipulation - - `AddingState`: When a new tool is being created - -4. **Drawing Creation**: When adding a new drawing: - - The appropriate `DrawingAddingPreview` is created based on the platform - - The preview handles user interactions to define the drawing's shape - - Once complete, the final `InteractableDrawing` is added to the chart - - The state transitions back to `NormalState` +1. **User Interaction**: + - User interactions (taps, drags, hovers) are captured by the `InteractiveLayerBase` + - These events are passed to the appropriate `InteractiveLayerBehaviour` implementation + +2. **Platform-Specific Handling**: + - The `InteractiveLayerBehaviour` determines how interactions should be handled based on the platform: + - **Desktop Behaviour**: Optimized for mouse interactions, hover events, and precise positioning + - **Mobile Behaviour**: Optimized for touch interactions, gestures, and larger touch targets + +3. **State Management**: + - The current `InteractiveState` processes the interaction based on the current mode: + - **NormalState**: Default state for selecting existing tools or initiating new tool creation + - **SelectedState**: When a tool is selected, showing control points for manipulation + - **AddingState**: When a new tool is being created, capturing coordinates and showing preview + +4. **Drawing Creation Process**: + - When adding a new drawing: + - The appropriate `DrawingAddingPreview` is created based on the platform + - Desktop Preview: Handles mouse-based creation with hover feedback + - Mobile Preview: Handles touch-based creation with appropriate gesture recognition + - The preview handles user interactions to define the drawing's shape + - Once complete, the final `InteractableDrawing` is added to the chart + - The state transitions back to `NormalState` + +5. **Drawing Tool States**: + - Each drawing tool can be in one of several states as defined by the `DrawingToolState` enum + - These states determine how the drawing is rendered and how it responds to user interactions + - See the DrawingToolState section for details on each state This architecture provides a flexible framework that: - Separates platform-specific behavior from core functionality - Manages state transitions cleanly - Supports different drawing tools with minimal code duplication -- Provides appropriate previews during the drawing creation process \ No newline at end of file +- Provides appropriate previews during the drawing creation process +- Adapts to different input methods across platforms \ No newline at end of file From 7888e7e5c3db47d4eb6d3521ce11a5645af7ba3f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 12 May 2025 23:31:04 +0800 Subject: [PATCH 146/311] update documentation --- doc/interactive_layer.md | 106 +++++++++++++++++++-------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index 0ce0b16aa..ca297db8b 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -174,32 +174,32 @@ The following diagram illustrates the architecture and flow of the Interactive L ┌─────────────────────────────────────────────────────────────────────────┐ │ InteractiveLayerBase │ │ │ -│ ┌─────────────────────────────────────────────────────────────────┐ │ +│ ┌──────────────────────────────────────────────────────────────────┐ │ │ │ InteractiveLayerBehaviour │ │ │ │ │ │ -│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ -│ │ │ Desktop Behaviour │ │ Mobile Behaviour │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ • Mouse interactions │ │ • Touch interactions │ │ │ -│ │ │ • Hover support │ │ • Gesture recognition │ │ │ -│ │ │ • Precise positioning │ │ • Larger touch targets │ │ │ -│ │ └────────────────────────┘ └────────────────────────┘ │ │ +│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ +│ │ │ Desktop Behaviour │ │ Mobile Behaviour │ │ │ +│ │ │ │ │ │ │ │ +│ │ │ • Mouse interactions │ │ • Touch interactions │ │ │ +│ │ │ • Hover support │ │ • Gesture recognition │ │ │ +│ │ │ • Precise positioning │ │ • Larger touch targets │ │ │ +│ │ └────────────────────────┘ └────────────────────────┘ │ │ │ │ ▲ ▲ │ │ │ │ │ │ │ │ -│ │ └────────────────┬───────────────┘ │ │ +│ │ └────────────────┬───────────────┘ │ │ │ │ │ │ │ │ └──────────────────────────────────┼───────────────────────────────┘ │ │ │ │ │ ┌──────────────────────────────────┼───────────────────────────────┐ │ │ │ InteractiveState │ │ │ │ │ │ │ │ -│ │ ┌────────────────────────┐ │ ┌────────────────────────┐│ │ -│ │ │ Normal State │◄────┼────►│ Selected State ││ │ -│ │ │ │ │ │ ││ │ -│ │ │ • Default state │ │ │ • Tool is selected ││ │ -│ │ │ • Select tools │ │ │ • Show control points ││ │ -│ │ │ • Start adding tools │ │ │ • Enable manipulation ││ │ -│ │ └──────────┬─────────────┘ │ └─────────────▲──────────┘│ │ +│ │ ┌────────────────────────┐ │ ┌────────────────────────┐ │ │ +│ │ │ Normal State │◄────┼────►│ Selected State │ │ │ +│ │ │ │ │ │ │ │ │ +│ │ │ • Default state │ │ │ • Tool is selected │ │ │ +│ │ │ • Select tools │ │ │ • Show control points │ │ │ +│ │ │ • Start adding tools │ │ │ • Enable manipulation │ │ │ +│ │ └──────────┬─────────────┘ │ └─────────────▲──────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ▼ │ │ │ │ @@ -210,43 +210,43 @@ The following diagram illustrates the architecture and flow of the Interactive L │ │ │ • Capture coordinates │ │ │ │ │ │ │ • Show drawing preview │ │ │ │ │ │ └────────────────────────┘ │ │ │ -│ └──────────────────────────────────┼───────────────────────────────┘ │ -└──────────────────────────────────────┼───────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────────────┐ -│ Drawing Tool Creation │ -│ │ -│ ┌─────────────────────────────────────────────────────────────────┐ │ -│ │ DrawingAddingPreview │ │ -│ │ │ │ -│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ -│ │ │ Desktop Preview │ │ Mobile Preview │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ • Mouse-based creation │ │ • Touch-based creation │ │ │ -│ │ │ • Hover feedback │ │ • Tap sequence handling│ │ │ -│ │ │ • Precise positioning │ │ • Gesture recognition │ │ │ -│ │ └────────────┬───────────┘ └──────────┬─────────────┘ │ │ -│ │ │ │ │ │ -│ │ └────────────────┬───────────────┘ │ │ -│ │ │ │ │ -│ └────────────────────────────────┼────────────────────────────────┘ │ -│ │ │ -│ ▼ │ -│ ┌─────────────────────────────────────────────────────────────────┐ │ -│ │ InteractableDrawing │ │ -│ │ │ │ -│ │ ┌────────────────────────────────────────────────────────────┐ │ │ -│ │ │ Drawing Tool States │ │ │ -│ │ │ │ │ │ -│ │ │ See the DrawingToolState section for details on the │ │ │ -│ │ │ different states a drawing tool can be in (idle, selected, │ │ │ -│ │ │ hovered, adding, dragging, animating) │ │ │ -│ │ │ │ │ │ -│ │ └────────────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────────────────────┘ │ -└─────────────────────────────────────────────────────────────────────────┘ +│ └─────────────────────────────────┼────────────────────────────────┘ │ +└────────────────────────────────────┼────────────────────────────────────┘ + │ + ▼ +┌───────────────────────────────────────────────────────────────────────┐ +│ Drawing Tool Creation │ +│ │ +│ ┌─────────────────────────────────────────────────────────────────┐ │ +│ │ DrawingAddingPreview │ │ +│ │ │ │ +│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ +│ │ │ Desktop Preview │ │ Mobile Preview │ │ │ +│ │ │ │ │ │ │ │ +│ │ │ • Mouse-based creation │ │ • Touch-based creation │ │ │ +│ │ │ • Hover feedback │ │ • Tap sequence handling│ │ │ +│ │ │ • Precise positioning │ │ • Gesture recognition │ │ │ +│ │ └────────────┬───────────┘ └──────────┬─────────────┘ │ │ +│ │ │ │ │ │ +│ │ └────────────────┬───────────────┘ │ │ +│ │ │ │ │ +│ └────────────────────────────────┼────────────────────────────────┘ │ +│ │ │ +│ ▼ │ +│ ┌──────────────────────────────────────────────────────────────────┐ │ +│ │ InteractableDrawing │ │ +│ │ │ │ +│ │ ┌─────────────────────────────────────────────────────────────┐ │ │ +│ │ │ Drawing Tool States │ │ │ +│ │ │ │ │ │ +│ │ │ See the DrawingToolState section for details on the │ │ │ +│ │ │ different states a drawing tool can be in (idle, selected, │ │ │ +│ │ │ hovered, adding, dragging, animating) │ │ │ +│ │ │ │ │ │ +│ │ └─────────────────────────────────────────────────────────────┘ │ │ +│ │ │ │ +│ └──────────────────────────────────────────────────────────────────┘ │ +└───────────────────────────────────────────────────────────────────────┘ ``` ### Flow Explanation: From 26adc21f6f8e5c9f8ca06021f6371f363b537c34 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 13 May 2025 13:36:08 +0800 Subject: [PATCH 147/311] add Mermaid and SVG files for diagrams in interactive layer docs --- doc/diagrams/horizontal_line_sequence.md | 32 +++++ doc/diagrams/horizontal_line_sequence.svg | 1 + .../interactive_layer_architecture.md | 44 ++++++ .../interactive_layer_architecture.svg | 1 + doc/interactive_layer.md | 132 +++++++----------- 5 files changed, 125 insertions(+), 85 deletions(-) create mode 100644 doc/diagrams/horizontal_line_sequence.md create mode 100644 doc/diagrams/horizontal_line_sequence.svg create mode 100644 doc/diagrams/interactive_layer_architecture.md create mode 100644 doc/diagrams/interactive_layer_architecture.svg diff --git a/doc/diagrams/horizontal_line_sequence.md b/doc/diagrams/horizontal_line_sequence.md new file mode 100644 index 000000000..b6084f3fa --- /dev/null +++ b/doc/diagrams/horizontal_line_sequence.md @@ -0,0 +1,32 @@ +```mermaid +sequenceDiagram + participant User + participant ILB as InteractiveLayerBase + participant ILMB as InteractiveLayerMobileBehaviour + participant IATSM as InteractiveAddingToolStateMobile + participant HLID as HorizontalLineInteractableDrawing + participant HLAPM as HorizontalLineAddingPreviewMobile + + User->>ILB: 1. Select Horizontal Line + ILB->>ILMB: 2. onAddDrawingTool(config) + ILMB->>IATSM: 3. updateStateTo(AddingToolStateMobile) + Note over ILMB,IATSM: State transition + IATSM-->>ILMB: 4. Create HorizontalLineInteractableDrawing + + IATSM->>HLID: 5. getAddingPreviewForMobileBehaviour() + HLID->>HLAPM: 6. Create HorizontalLineAddingPreviewMobile + + HLAPM->>ILB: 7. Show preview on chart + + User->>ILB: 8. Drag to position line + ILB->>HLAPM: 9. onDragUpdate() + HLAPM->>HLID: 10. Update position + + User->>ILB: 11. Tap outside preview + ILB->>HLAPM: 12. onTap() + HLAPM->>HLID: 13. onCreateTap() + HLID->>HLID: 14. Set startPoint + HLID->>HLAPM: 15. onDone() + + Note over User,HLAPM: Drawing is added to chart and state returns to Normal +``` \ No newline at end of file diff --git a/doc/diagrams/horizontal_line_sequence.svg b/doc/diagrams/horizontal_line_sequence.svg new file mode 100644 index 000000000..db50c5547 --- /dev/null +++ b/doc/diagrams/horizontal_line_sequence.svg @@ -0,0 +1 @@ +HorizontalLineAddingPreviewMobileHorizontalLineInteractableDrawingInteractiveAddingToolStateMobileInteractiveLayerMobileBehaviourInteractiveLayerBaseUserHorizontalLineAddingPreviewMobileHorizontalLineInteractableDrawingInteractiveAddingToolStateMobileInteractiveLayerMobileBehaviourInteractiveLayerBaseUserState transitionDrawing is added to chart and state returns to Normal1. Select Horizontal Line2. onAddDrawingTool(config)3. updateStateTo(AddingToolStateMobile)4. Create HorizontalLineInteractableDrawing5. getAddingPreviewForMobileBehaviour()6. Create HorizontalLineAddingPreviewMobile7. Show preview on chart8. Drag to position line9. onDragUpdate()10. Update position11. Tap outside preview12. onTap()13. onCreateTap()14. Set startPoint15. onDone() \ No newline at end of file diff --git a/doc/diagrams/interactive_layer_architecture.md b/doc/diagrams/interactive_layer_architecture.md new file mode 100644 index 000000000..c1042f8c4 --- /dev/null +++ b/doc/diagrams/interactive_layer_architecture.md @@ -0,0 +1,44 @@ +```mermaid +flowchart TD + UserInteractions["USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)"] + + subgraph InteractiveLayerBase["InteractiveLayerBase"] + subgraph Behaviour["InteractiveLayerBehaviour"] + DesktopBehaviour["Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning"] + MobileBehaviour["Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets"] + + DesktopBehaviour <--> MobileBehaviour + end + + subgraph States["InteractiveState"] + NormalState["Normal State\n• Default state\n• Select tools\n• Start adding tools"] + SelectedState["Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation"] + AddingState["Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview"] + + NormalState <--> SelectedState + NormalState --> AddingState + AddingState --> SelectedState + end + end + + subgraph DrawingToolCreation["Drawing Tool Creation"] + subgraph Preview["DrawingAddingPreview"] + DesktopPreview["Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning"] + MobilePreview["Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition"] + + DesktopPreview <--> MobilePreview + end + + InteractableDrawing["InteractableDrawing"] + + subgraph ToolStates["Drawing Tool States"] + States["See the DrawingToolState section for details on the\ndifferent states a drawing tool can be in (idle, selected,\nhovered, adding, dragging, animating)"] + end + + InteractableDrawing --- ToolStates + end + + UserInteractions --> InteractiveLayerBase + InteractiveLayerBase --> DrawingToolCreation + Preview --> InteractableDrawing +``` \ No newline at end of file diff --git a/doc/diagrams/interactive_layer_architecture.svg b/doc/diagrams/interactive_layer_architecture.svg new file mode 100644 index 000000000..52c21bdfa --- /dev/null +++ b/doc/diagrams/interactive_layer_architecture.svg @@ -0,0 +1 @@ +

Drawing Tool Creation

Drawing Tool States

InteractableDrawing

DrawingAddingPreview

Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning

Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition

InteractiveLayerBase

InteractiveState

Normal State\n• Default state\n• Select tools\n• Start adding tools

Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation

Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview

InteractiveLayerBehaviour

Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning

Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets

USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)

 \ No newline at end of file diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index ca297db8b..20caa515b 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -164,90 +164,7 @@ This architecture provides a clean separation of concerns and makes it easy to a The following diagram illustrates the architecture and flow of the Interactive Layer, including the relationships between InteractiveStates, InteractiveLayerBehaviour, and DrawingAddingPreview: -``` -┌─────────────────────────────────────────────────────────────────────────┐ -│ USER INTERACTIONS │ -│ (Taps, Drags, Hovers, Gestures, etc.) │ -└───────────────────────────────────┬─────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────────────┐ -│ InteractiveLayerBase │ -│ │ -│ ┌──────────────────────────────────────────────────────────────────┐ │ -│ │ InteractiveLayerBehaviour │ │ -│ │ │ │ -│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ -│ │ │ Desktop Behaviour │ │ Mobile Behaviour │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ • Mouse interactions │ │ • Touch interactions │ │ │ -│ │ │ • Hover support │ │ • Gesture recognition │ │ │ -│ │ │ • Precise positioning │ │ • Larger touch targets │ │ │ -│ │ └────────────────────────┘ └────────────────────────┘ │ │ -│ │ ▲ ▲ │ │ -│ │ │ │ │ │ -│ │ └────────────────┬───────────────┘ │ │ -│ │ │ │ │ -│ └──────────────────────────────────┼───────────────────────────────┘ │ -│ │ │ -│ ┌──────────────────────────────────┼───────────────────────────────┐ │ -│ │ InteractiveState │ │ │ -│ │ │ │ │ -│ │ ┌────────────────────────┐ │ ┌────────────────────────┐ │ │ -│ │ │ Normal State │◄────┼────►│ Selected State │ │ │ -│ │ │ │ │ │ │ │ │ -│ │ │ • Default state │ │ │ • Tool is selected │ │ │ -│ │ │ • Select tools │ │ │ • Show control points │ │ │ -│ │ │ • Start adding tools │ │ │ • Enable manipulation │ │ │ -│ │ └──────────┬─────────────┘ │ └─────────────▲──────────┘ │ │ -│ │ │ │ │ │ │ -│ │ │ │ │ │ │ -│ │ ▼ │ │ │ │ -│ │ ┌────────────────────────┐ │ │ │ │ -│ │ │ Adding State │ │ │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ • Creating new tool │─────┼───────────────────┘ │ │ -│ │ │ • Capture coordinates │ │ │ │ -│ │ │ • Show drawing preview │ │ │ │ -│ │ └────────────────────────┘ │ │ │ -│ └─────────────────────────────────┼────────────────────────────────┘ │ -└────────────────────────────────────┼────────────────────────────────────┘ - │ - ▼ -┌───────────────────────────────────────────────────────────────────────┐ -│ Drawing Tool Creation │ -│ │ -│ ┌─────────────────────────────────────────────────────────────────┐ │ -│ │ DrawingAddingPreview │ │ -│ │ │ │ -│ │ ┌────────────────────────┐ ┌────────────────────────┐ │ │ -│ │ │ Desktop Preview │ │ Mobile Preview │ │ │ -│ │ │ │ │ │ │ │ -│ │ │ • Mouse-based creation │ │ • Touch-based creation │ │ │ -│ │ │ • Hover feedback │ │ • Tap sequence handling│ │ │ -│ │ │ • Precise positioning │ │ • Gesture recognition │ │ │ -│ │ └────────────┬───────────┘ └──────────┬─────────────┘ │ │ -│ │ │ │ │ │ -│ │ └────────────────┬───────────────┘ │ │ -│ │ │ │ │ -│ └────────────────────────────────┼────────────────────────────────┘ │ -│ │ │ -│ ▼ │ -│ ┌──────────────────────────────────────────────────────────────────┐ │ -│ │ InteractableDrawing │ │ -│ │ │ │ -│ │ ┌─────────────────────────────────────────────────────────────┐ │ │ -│ │ │ Drawing Tool States │ │ │ -│ │ │ │ │ │ -│ │ │ See the DrawingToolState section for details on the │ │ │ -│ │ │ different states a drawing tool can be in (idle, selected, │ │ │ -│ │ │ hovered, adding, dragging, animating) │ │ │ -│ │ │ │ │ │ -│ │ └─────────────────────────────────────────────────────────────┘ │ │ -│ │ │ │ -│ └──────────────────────────────────────────────────────────────────┘ │ -└───────────────────────────────────────────────────────────────────────┘ -``` +![Interactive Layer Architecture Diagram](diagrams/interactive_layer_architecture.svg) ### Flow Explanation: @@ -285,4 +202,49 @@ This architecture provides a flexible framework that: - Manages state transitions cleanly - Supports different drawing tools with minimal code duplication - Provides appropriate previews during the drawing creation process -- Adapts to different input methods across platforms \ No newline at end of file +- Adapts to different input methods across platforms + +## Example: Adding a Horizontal Line on Mobile + +To illustrate how the Interactive Layer components work together in practice, let's walk through the process of adding a horizontal line drawing tool on a mobile device: + +### Sequence Diagram + +![Horizontal Line Adding Sequence Diagram](diagrams/horizontal_line_sequence.svg) + +### Flow Explanation + +1. **User Initiates Drawing**: The user selects the horizontal line drawing tool from the UI. + +2. **Configuration Creation**: The system creates a `HorizontalDrawingToolConfig` object with the default settings for a horizontal line. + +3. **State Transition**: The `InteractiveLayerBase` calls `onAddDrawingTool(config)` on the `InteractiveLayerMobileBehaviour`, which transitions to the `InteractiveAddingToolStateMobile`. + +4. **Drawing Creation**: The `InteractiveAddingToolStateMobile` creates a new `HorizontalLineInteractableDrawing` instance with the provided configuration. + +5. **Preview Creation**: + - The `InteractiveAddingToolStateMobile` calls `getAddingPreviewForMobileBehaviour()` on the drawing to get the appropriate preview for mobile + - This returns a new `HorizontalLineAddingPreviewMobile` instance + - The preview is initialized with a reference to the `HorizontalLineInteractableDrawing` and the `InteractiveLayerMobileBehaviour` + +6. **Preview Display**: The preview is shown on the chart with an initial position, displaying a dashed horizontal line that follows the user's finger as they move it across the screen. + +7. **Positioning the Line**: After the preview is shown: + - The user can drag to position the horizontal line at the desired height + - Drag events are captured by the `InteractiveLayerBase` + - These events are passed to the `HorizontalLineAddingPreviewMobile.onDragUpdate()` method + - The preview updates the position of the line in real-time as the user drags + +8. **Confirming the Drawing**: When the user is satisfied with the position: + - The user taps outside the preview (not on the tool itself) + - The tap event is captured by the `InteractiveLayerBase` + - It's passed to the current state (`InteractiveAddingToolStateMobile`) + - The state forwards it to the `HorizontalLineAddingPreviewMobile.onCreateTap()` method + - The `onCreateTap()` method sets the `startPoint` of the `HorizontalLineInteractableDrawing` + - It then calls the `onDone()` callback to signal that the drawing is complete + - The `InteractiveAddingToolStateMobile` transitions back to `InteractiveNormalState` + - The horizontal line is added to the chart as a permanent drawing + +9. **Result**: A horizontal line is now displayed on the chart at the position where the user tapped, and the system returns to the normal state where the user can select or add other drawings. + +This example demonstrates how the various components of the Interactive Layer work together to provide a smooth and intuitive drawing experience, with platform-specific behavior handled through the appropriate preview classes. \ No newline at end of file From cfff28f8bb60c5f4e696dea016bdfb14424d2b8a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 13 May 2025 13:43:43 +0800 Subject: [PATCH 148/311] chore: update docs --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 85c91ae74..05b50cbd8 100644 --- a/README.md +++ b/README.md @@ -431,6 +431,33 @@ For more detailed information, check out these documentation files: - [DerivChart Widget Usage](doc/deriv_chart_widget_usage.md) - [Contributing](doc/contribution.md) +## Documentation Diagrams + +The project uses Mermaid diagrams for visualizing architecture and processes. These diagrams are stored as separate files and referenced in the documentation. + +### Updating Diagrams + +To update a diagram: + +1. Edit the Mermaid code in the corresponding file in the `doc/diagrams/` directory + +2. Generate SVG files from the Mermaid code: + - Option 1: Use the [Mermaid Live Editor](https://mermaid.live/) + - Copy the Mermaid code from the `.md` file + - Paste it into the editor + - Export as SVG + - Save the SVG file to the same location as the `.md` file with the same name but `.svg` extension + + - Option 2: Use the Mermaid CLI + - Refer to this details: ![mermaid-cli](https://github.com/mermaid-js/mermaid-cli) + +3. The documentation files (like `doc/interactive_layer.md`) reference these SVG files using standard Markdown image syntax: + ```markdown + ![Diagram Title](diagrams/diagram_filename.svg) + ``` + +This approach separates the diagram code from the documentation, making both easier to maintain. + ## Dependencies Key dependencies include: From 011a9e77f6db652dc7d2545d4a3d224fd4ec2d7a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 12:10:54 +0800 Subject: [PATCH 149/311] show a different visuals when preview is being dragged --- .../helpers/paint_helpers.dart | 7 +- .../interactable_drawing_custom_painter.dart | 12 ++-- .../interactable_drawings/drawing_v2.dart | 3 +- ...orizontal_line_adding_preview_desktop.dart | 3 +- ...horizontal_line_adding_preview_mobile.dart | 4 +- .../horizontal_line_interactable_drawing.dart | 4 +- .../interactable_drawing.dart | 3 +- .../adding_tool_alignment_cross_hair.dart | 3 +- .../trend_line/line_interactable_drawing.dart | 4 +- .../trend_line_adding_preview_desktop.dart | 5 +- .../trend_line_adding_preview_mobile.dart | 25 +++++++- .../interactive_layer/interactive_layer.dart | 10 ++- .../interactive_adding_tool_state.dart | 64 +++++++++++++------ 13 files changed, 107 insertions(+), 40 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index b1a2b99cd..8a3d5c013 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -71,11 +71,12 @@ void drawPoint( QuoteToY quoteToY, Canvas canvas, DrawingPaintStyle paintStyle, - LineStyle lineStyle, -) { + LineStyle lineStyle, { + double radius = 5, +}) { canvas.drawCircle( Offset(epochToX(point.epoch), quoteToY(point.quote)), - 5, + radius, paintStyle.glowyCirclePaintStyle(lineStyle.color), ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 1addd40a8..32abaf518 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -15,7 +15,7 @@ import 'enums/drawing_tool_state.dart'; /// A callback which calling it should return if the [drawing] is selected. typedef GetDrawingState = Set Function( - InteractableDrawing drawing, + DrawingV2 drawing, ); /// Interactable drawing custom painter. @@ -31,6 +31,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { required this.quoteToY, required this.quoteFromY, required this.drawingState, + required this.currentDrawingState, required this.epochRange, required this.quoteRange, this.animationInfo = const AnimationInfo(), @@ -40,7 +41,9 @@ class InteractableDrawingCustomPainter extends CustomPainter { final DrawingV2 drawing; /// [drawing]'s state. - final Set drawingState; + final GetDrawingState drawingState; + + final Set currentDrawingState; /// The main series of the chart. final DataSeries series; @@ -97,13 +100,14 @@ class InteractableDrawingCustomPainter extends CustomPainter { return isSeriesChanged || (drawingIsInRange && // Drawing state is changed - (!setEquals(oldDelegate.drawingState, drawingState) || + (!setEquals(oldDelegate.currentDrawingState, currentDrawingState) || // Epoch range is changed oldDelegate.epochRange != epochRange || // Quote range is changed oldDelegate.quoteRange != quoteRange || // Drawing needs repaint - drawing.shouldRepaint(drawingState, oldDelegate.drawing))); + drawing.shouldRepaint( + currentDrawingState, oldDelegate.drawing))); } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index 208a34bb1..580789a96 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -6,6 +6,7 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactable_drawing_custom_painter.dart'; /// The margin for hit testing. const double hitTestMargin = 32; @@ -79,7 +80,7 @@ abstract class DrawingV2 { EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState getDrawingState, ); /// Returns true if the drawing tool should repaint. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index e32896e3e..1ed9550d2 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -7,6 +7,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_ import 'package:flutter/gestures.dart'; import '../../enums/drawing_tool_state.dart'; +import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; @@ -41,7 +42,7 @@ class HorizontalLineAddingPreviewDesktop EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState drawingState, ) { if (_hoverPosition != null) { canvas.drawLine( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index 4b91bd333..0a7af3efc 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -4,10 +4,10 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. 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/interactive_layer/helpers/paint_helpers.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:flutter/gestures.dart'; import '../../enums/drawing_tool_state.dart'; +import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; @@ -60,7 +60,7 @@ class HorizontalLineAddingPreviewMobile EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState drawingState, ) { if (interactableDrawing.startPoint != null) { final double lineY = quoteToY(interactableDrawing.startPoint!.quote); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index dda410ef7..8553525a4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. 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/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; @@ -89,10 +90,11 @@ class HorizontalLineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState getDrawingState, ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + final drawingState = getDrawingState(this); if (startPoint != null) { final Offset startOffset = diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index f03274d26..e429f07c5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -6,6 +6,7 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactable_drawing_custom_painter.dart'; import '../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import '../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'drawing_adding_preview.dart'; @@ -93,7 +94,7 @@ abstract class InteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState getDrawingState, ); @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index e2469f8fa..94954dfd7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -7,6 +7,7 @@ import 'package:flutter/gestures.dart'; import '../../enums/drawing_tool_state.dart'; import '../../helpers/paint_helpers.dart'; +import '../../interactable_drawing_custom_painter.dart'; import '../drawing_v2.dart'; /// A cross-hair used for aligning the adding tool. @@ -38,7 +39,7 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { @override void paint(Canvas canvas, Size size, EpochToX epochToX, QuoteToY quoteToY, - AnimationInfo animationInfo, Set drawingState) { + AnimationInfo animationInfo, GetDrawingState getDrawingState) { if (_currentHoverPosition == null) { return; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart index 63b9608ec..385f50c50 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart @@ -11,6 +11,7 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; import '../../helpers/paint_helpers.dart'; +import '../../interactable_drawing_custom_painter.dart'; import '../../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import '../../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import '../drawing_adding_preview.dart'; @@ -170,12 +171,13 @@ class LineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState getDrawingState, ) { final LineStyle lineStyle = config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); // Check if this drawing is selected + final drawingState = getDrawingState(this); if (startPoint != null && endPoint != null) { final Offset startOffset = Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote)); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index e1d14f1b9..a74856995 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -43,7 +44,7 @@ class LineAddingPreviewDesktop EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState getDrawingState, ) { final LineStyle lineStyle = interactableDrawing.config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); @@ -70,7 +71,7 @@ class LineAddingPreviewDesktop } _crossHair.paint( - canvas, size, epochToX, quoteToY, animationInfo, drawingState); + canvas, size, epochToX, quoteToY, animationInfo, getDrawingState); } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index a5e3ad882..cab2bcc72 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -7,6 +7,7 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; import '../../helpers/paint_helpers.dart'; +import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import '../drawing_v2.dart'; import 'line_interactable_drawing.dart'; @@ -66,24 +67,42 @@ class LineAddingPreviewMobile EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, - Set drawingState, + GetDrawingState getDrawingState, ) { final LineStyle lineStyle = interactableDrawing.config.lineStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); final EdgePoint? startPoint = interactableDrawing.startPoint; final EdgePoint? endPoint = interactableDrawing.endPoint; + final Set drawingState = + getDrawingState(this); if (startPoint != null && endPoint == null) { // Start point is spawned at the chart, user can move it, we should show // alignment cross-hair on start point. - drawPoint(startPoint, epochToX, quoteToY, canvas, paintStyle, lineStyle); + drawPoint( + startPoint, + epochToX, + quoteToY, + canvas, + paintStyle, + lineStyle, + radius: drawingState.contains(DrawingToolState.dragging) ? 8 : 5, + ); drawPointAlignmentGuides(canvas, size, Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote))); } else if (startPoint != null && endPoint != null) { // End point is also spawned at the chart, user can move it, we should // show alignment cross-hair on end point. - drawPoint(endPoint, epochToX, quoteToY, canvas, paintStyle, lineStyle); + drawPoint( + endPoint, + epochToX, + quoteToY, + canvas, + paintStyle, + lineStyle, + radius: drawingState.contains(DrawingToolState.dragging) ? 8 : 5, + ); final startOffset = Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index b9975bd24..37aacd550 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -349,9 +349,12 @@ class _InteractiveLayerGestureHandlerState foregroundPainter: InteractableDrawingCustomPainter( drawing: e, - drawingState: widget + currentDrawingState: widget .interactiveLayerBehaviour .getToolState(e), + drawingState: widget + .interactiveLayerBehaviour + .getToolState, series: widget.series, theme: context.watch(), chartConfig: widget.chartConfig, @@ -376,9 +379,12 @@ class _InteractiveLayerGestureHandlerState InteractableDrawingCustomPainter( drawing: e, series: widget.series, - drawingState: widget + currentDrawingState: widget .interactiveLayerBehaviour .getToolState(e), + drawingState: widget + .interactiveLayerBehaviour + .getToolState, theme: context.watch(), chartConfig: widget.chartConfig, epochFromX: xAxis.epochFromX, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 25cc4e5b3..195ae403e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -1,20 +1,8 @@ -import 'dart:ui'; - -import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.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_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/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; -import 'package:deriv_chart/src/models/axis_range.dart'; -import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; -import '../helpers/paint_helpers.dart'; import '../interactable_drawings/drawing_v2.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; @@ -53,6 +41,8 @@ class InteractiveAddingToolState extends InteractiveState /// when the user taps on the chart. final DrawingToolConfig addingTool; + bool _isAddingToolBeingDragged = false; + /// The drawing that is currently being created. /// /// This is initialized when the user first taps on the chart and is used @@ -64,16 +54,54 @@ class InteractiveAddingToolState extends InteractiveState [if (_addingDrawing != null) _addingDrawing!]; @override - Set getToolState(DrawingV2 drawing) => - drawing.id == addingTool.configId - ? {DrawingToolState.adding} - : {DrawingToolState.idle}; + Set getToolState(DrawingV2 drawing) { + final String? addingDrawingId = _addingDrawing != null + ? interactiveLayerBehaviour + .getAddingDrawingPreview(_addingDrawing!.interactableDrawing) + .id + : null; + + final state = drawing.id == addingDrawingId + ? { + DrawingToolState.adding, + if (_isAddingToolBeingDragged) DrawingToolState.dragging + } + : {DrawingToolState.idle}; + + // print( + // '#### State for ${drawing.runtimeType} is: $state, $_isAddingToolBeingDragged, ${drawing.id}, $addingDrawingId'); + return state; + } @override - void onPanEnd(DragEndDetails details) {} + void onPanEnd(DragEndDetails details) { + if (_isAddingToolBeingDragged) { + _isAddingToolBeingDragged = false; + } + + if (_addingDrawing?.hitTest(details.localPosition, epochToX, quoteToY) ?? + false) { + _addingDrawing! + .onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); + } + } @override - void onPanStart(DragStartDetails details) {} + void onPanStart(DragStartDetails details) { + if (_addingDrawing?.hitTest(details.localPosition, epochToX, quoteToY) ?? + false) { + _isAddingToolBeingDragged = true; + _addingDrawing!.onDragStart( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); + } else { + _isAddingToolBeingDragged = false; + } + } @override void onPanUpdate(DragUpdateDetails details) { From 1ccd476759ca5e5145b7e8fba83c79b4d351ec90 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 14:49:32 +0800 Subject: [PATCH 150/311] fix: fix the issue of line start point not getting dragged --- .../trend_line_adding_preview_mobile.dart | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index cab2bcc72..ff5c1588b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -21,16 +21,18 @@ class LineAddingPreviewMobile required super.interactiveLayerBehaviour, required super.interactableDrawing, }) { - final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; - final Size? layerSize = interactiveLayer.layerSize; + if (interactableDrawing.startPoint == null) { + final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; + final Size? layerSize = interactiveLayer.layerSize; - final double centerX = layerSize != null ? layerSize.width / 2 : 0; - final double centerY = layerSize != null ? layerSize.height / 2 : 0; + final double centerX = layerSize != null ? layerSize.width / 2 : 0; + final double centerY = layerSize != null ? layerSize.height / 2 : 0; - interactableDrawing.startPoint = EdgePoint( - epoch: interactiveLayer.epochFromX(centerX), - quote: interactiveLayer.quoteFromY(centerY), - ); + interactableDrawing.startPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(centerX), + quote: interactiveLayer.quoteFromY(centerY), + ); + } } @override @@ -74,8 +76,7 @@ class LineAddingPreviewMobile final EdgePoint? startPoint = interactableDrawing.startPoint; final EdgePoint? endPoint = interactableDrawing.endPoint; - final Set drawingState = - getDrawingState(this); + final Set drawingState = getDrawingState(this); if (startPoint != null && endPoint == null) { // Start point is spawned at the chart, user can move it, we should show From 07446102f0d0c897bf5df7ef26a3f2714847f886 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 14:50:46 +0800 Subject: [PATCH 151/311] chore: code cleanup :recycle: --- .../trend_line/line_interactable_drawing.dart | 4 ++-- .../trend_line/trend_line_adding_preview_desktop.dart | 4 ++-- .../trend_line/trend_line_adding_preview_mobile.dart | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart index 385f50c50..734c74af7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart @@ -380,7 +380,7 @@ class LineInteractableDrawing DrawingAddingPreview getAddingPreviewForMobileBehaviour( InteractiveLayerMobileBehaviour layerBehaviour, ) => - LineAddingPreviewMobile( + TrendLineAddingPreviewMobile( interactiveLayerBehaviour: layerBehaviour, interactableDrawing: this, ); @@ -390,7 +390,7 @@ class LineInteractableDrawing getAddingPreviewForDesktopBehaviour( InteractiveLayerDesktopBehaviour layerBehaviour, ) => - LineAddingPreviewDesktop( + TrendLineAddingPreviewDesktop( interactiveLayerBehaviour: layerBehaviour, interactableDrawing: this, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index a74856995..064ef8364 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -15,10 +15,10 @@ import 'adding_tool_alignment_cross_hair.dart'; import 'line_interactable_drawing.dart'; /// Interactable drawing for line drawing tool. -class LineAddingPreviewDesktop +class TrendLineAddingPreviewDesktop extends DrawingAddingPreview { /// Initializes [LineInteractableDrawing]. - LineAddingPreviewDesktop({ + TrendLineAddingPreviewDesktop({ required super.interactiveLayerBehaviour, required super.interactableDrawing, }); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index ff5c1588b..c9fcb9bb0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -14,10 +14,10 @@ import 'line_interactable_drawing.dart'; /// A Line interactable just for the preview of the line when we're adding the /// line tool on mobile. -class LineAddingPreviewMobile +class TrendLineAddingPreviewMobile extends DrawingAddingPreview { /// Initializes [LineInteractableDrawing]. - LineAddingPreviewMobile({ + TrendLineAddingPreviewMobile({ required super.interactiveLayerBehaviour, required super.interactableDrawing, }) { From 14b10201f95f55351a3d38e74b6a26b57e759add Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 14:53:55 +0800 Subject: [PATCH 152/311] fix: fix the issue of horizontal line start point not getting dragged --- .../horizontal_line_adding_preview_mobile.dart | 17 ++++++++++++----- .../trend_line/line_interactable_drawing.dart | 10 +--------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index 0a7af3efc..e40dad62c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -6,7 +6,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:flutter/gestures.dart'; -import '../../enums/drawing_tool_state.dart'; import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; @@ -20,10 +19,18 @@ class HorizontalLineAddingPreviewMobile required super.interactiveLayerBehaviour, required super.interactableDrawing, }) { - interactableDrawing.startPoint = EdgePoint( - epoch: interactiveLayerBehaviour.interactiveLayer.epochFromX(200), - quote: interactiveLayerBehaviour.interactiveLayer.quoteFromY(200), - ); + if (interactableDrawing.startPoint == null) { + final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; + final Size? layerSize = interactiveLayer.layerSize; + + final double centerX = layerSize != null ? layerSize.width / 2 : 0; + final double centerY = layerSize != null ? layerSize.height / 2 : 0; + + interactableDrawing.startPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(centerX), + quote: interactiveLayer.quoteFromY(centerY), + ); + } } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart index 734c74af7..1a48df5db 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart @@ -244,15 +244,7 @@ class LineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, ) { - if (startPoint != null && - endPoint == null && - (Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), - ) - - details.localPosition) - .distance < - hitTestMargin) { + if (startPoint != null && endPoint == null) { // If we're dragging the start point, we need to update its position final Offset startOffset = Offset( epochToX(startPoint!.epoch), From 304476a315d083c509987170b8d2651e9bd50f81 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 15:01:58 +0800 Subject: [PATCH 153/311] chore: code cleanup :recycle: --- .../drawing_tools_ui/line/line_drawing_tool_config.dart | 4 ++-- .../trend_line/trend_line_adding_preview_desktop.dart | 7 +++---- .../trend_line/trend_line_adding_preview_mobile.dart | 6 +++--- ...e_drawing.dart => trend_line_interactable_drawing.dart} | 6 +++--- 4 files changed, 11 insertions(+), 12 deletions(-) rename lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/{line_interactable_drawing.dart => trend_line_interactable_drawing.dart} (99%) diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index a64fbf702..e47031a70 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -7,7 +7,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_model/point.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart'; import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; @@ -103,7 +103,7 @@ class LineDrawingToolConfig extends DrawingToolConfig { } @override - InteractableDrawing getInteractableDrawing() => LineInteractableDrawing( + InteractableDrawing getInteractableDrawing() => TrendLineInteractableDrawing( config: this, // TODO(NA): improve the logic. startPoint: edgePoints.isNotEmpty ? edgePoints.first : null, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index 064ef8364..7098d2d41 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -4,7 +4,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. 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/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; @@ -12,12 +11,12 @@ import 'package:flutter/gestures.dart'; import '../drawing_adding_preview.dart'; import 'adding_tool_alignment_cross_hair.dart'; -import 'line_interactable_drawing.dart'; +import 'trend_line_interactable_drawing.dart'; /// Interactable drawing for line drawing tool. class TrendLineAddingPreviewDesktop - extends DrawingAddingPreview { - /// Initializes [LineInteractableDrawing]. + extends DrawingAddingPreview { + /// Initializes [TrendLineInteractableDrawing]. TrendLineAddingPreviewDesktop({ required super.interactiveLayerBehaviour, required super.interactableDrawing, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index c9fcb9bb0..a82386989 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -10,13 +10,13 @@ import '../../helpers/paint_helpers.dart'; import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import '../drawing_v2.dart'; -import 'line_interactable_drawing.dart'; +import 'trend_line_interactable_drawing.dart'; /// A Line interactable just for the preview of the line when we're adding the /// line tool on mobile. class TrendLineAddingPreviewMobile - extends DrawingAddingPreview { - /// Initializes [LineInteractableDrawing]. + extends DrawingAddingPreview { + /// Initializes [TrendLineInteractableDrawing]. TrendLineAddingPreviewMobile({ required super.interactiveLayerBehaviour, required super.interactableDrawing, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart similarity index 99% rename from lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart rename to lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 1a48df5db..7a9794df9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -21,10 +21,10 @@ import 'trend_line_adding_preview_desktop.dart'; import 'trend_line_adding_preview_mobile.dart'; /// Interactable drawing for line drawing tool. -class LineInteractableDrawing +class TrendLineInteractableDrawing extends InteractableDrawing { - /// Initializes [LineInteractableDrawing]. - LineInteractableDrawing({ + /// Initializes [TrendLineInteractableDrawing]. + TrendLineInteractableDrawing({ required LineDrawingToolConfig config, required this.startPoint, required this.endPoint, From 316d47a6386f450a57d7e60a5f5c7fe55ad1a2e4 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 15:44:01 +0800 Subject: [PATCH 154/311] chore: fix formatting of a few files --- .../horizontal_line_interactable_drawing.dart | 1 - .../interactive_layer_behaviour.dart | 10 +++++----- .../interactive_layer_mobile_behaviour.dart | 6 +++--- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 8553525a4..55f49030a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -185,7 +185,6 @@ class HorizontalLineInteractableDrawing ); } - @override void onDragUpdate( DragUpdateDetails details, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 91f40b337..4e8013ce0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -34,10 +34,10 @@ abstract class InteractiveLayerBehaviour { /// Updates the interactive layer state to the new state. Future updateStateTo( - InteractiveState newState, - StateChangeAnimationDirection direction, { - bool waitForAnimation = false, - }) async { + InteractiveState newState, + StateChangeAnimationDirection direction, { + bool waitForAnimation = false, + }) async { if (waitForAnimation) { await interactiveLayer.animateStateChange(direction); @@ -96,4 +96,4 @@ abstract class InteractiveLayerBehaviour { void onHover(PointerHoverEvent event) { _interactiveState.onHover(event); } -} \ No newline at end of file +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart index 62295ed3e..0d54f5a07 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart @@ -23,7 +23,7 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { @override DrawingAddingPreview getAddingDrawingPreview( - InteractableDrawing drawing, - ) => + InteractableDrawing drawing, + ) => drawing.getAddingPreviewForMobileBehaviour(this); -} \ No newline at end of file +} From b470bbf0445ba32aa7fcfcc40f09c6d9025345a1 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 15:52:44 +0800 Subject: [PATCH 155/311] chore: fix lint warnings --- .../line_series/oscillator_line_painter.dart | 2 -- .../data_model/draggable_edge_point.dart | 1 + lib/src/deriv_chart/chart/main_chart.dart | 1 + lib/src/deriv_chart/deriv_chart.dart | 1 - .../interactable_drawing_custom_painter.dart | 11 +++++++++-- .../horizontal_line_adding_preview_desktop.dart | 2 -- .../trend_line/adding_tool_alignment_cross_hair.dart | 1 - 7 files changed, 11 insertions(+), 8 deletions(-) diff --git a/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart b/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart index 4ff2cdf97..fbd6b085f 100644 --- a/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart +++ b/lib/src/deriv_chart/chart/data_visualization/chart_series/line_series/oscillator_line_painter.dart @@ -1,5 +1,3 @@ -import 'dart:ui'; - import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/helpers/combine_paths.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/chart/helpers/functions/helper_functions.dart'; diff --git a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.dart b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.dart index e6e31820b..5b4badb96 100644 --- a/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.dart +++ b/lib/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/draggable_edge_point.dart @@ -90,6 +90,7 @@ class DraggableEdgePoint extends EdgePoint { ); /// Creates a copy of this object. + @override DraggableEdgePoint copyWith({ int? epoch, double? quote, diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index f93035c36..d32f36195 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -438,6 +438,7 @@ class _ChartImplementationState extends BasicChartState { }, ); + // ignore: unused_element Widget _buildDrawingToolChart(DrawingTools drawingTools) => MultipleAnimatedBuilder( animations: [ diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index dca491f66..f709e28a1 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -12,7 +12,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_serie import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/markers/marker_series.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_object.dart'; import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:deriv_chart/src/misc/callbacks.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 32abaf518..cae9dbe60 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -1,6 +1,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; @@ -40,9 +40,16 @@ class InteractableDrawingCustomPainter extends CustomPainter { /// Drawing to paint. final DrawingV2 drawing; - /// [drawing]'s state. + /// A callback to get the updated state of any drawing tool when calling it. + /// + /// To see where this callback is implemented check [InteractiveState] + /// classes. final GetDrawingState drawingState; + /// The current state of drawing the [drawing] when we added its painter in + /// the widget tree, this is used to do the comparison between between old + /// state and new state of repainting logic of the + /// [InteractableDrawingCustomPainter]. final Set currentDrawingState; /// The main series of the chart. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index 1ed9550d2..b0ae8990b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -3,10 +3,8 @@ import 'dart:ui'; 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/edge_point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; import 'package:flutter/gestures.dart'; -import '../../enums/drawing_tool_state.dart'; import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index 94954dfd7..b0d50774b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -5,7 +5,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/gestures.dart'; -import '../../enums/drawing_tool_state.dart'; import '../../helpers/paint_helpers.dart'; import '../../interactable_drawing_custom_painter.dart'; import '../drawing_v2.dart'; From fff3741bc561537efd32edbf23b94762e3d9495c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:28:13 +0800 Subject: [PATCH 156/311] change diagram files's extension to mmd --- ...quence.md => horizontal_line_sequence.mmd} | 4 +--- ....md => interactive_layer_architecture.mmd} | 4 +--- scripts/convert_mmd_to_svg.sh.sh | 19 +++++++++++++++++++ 3 files changed, 21 insertions(+), 6 deletions(-) rename doc/diagrams/{horizontal_line_sequence.md => horizontal_line_sequence.mmd} (97%) rename doc/diagrams/{interactive_layer_architecture.md => interactive_layer_architecture.mmd} (97%) create mode 100644 scripts/convert_mmd_to_svg.sh.sh diff --git a/doc/diagrams/horizontal_line_sequence.md b/doc/diagrams/horizontal_line_sequence.mmd similarity index 97% rename from doc/diagrams/horizontal_line_sequence.md rename to doc/diagrams/horizontal_line_sequence.mmd index b6084f3fa..cdad06f69 100644 --- a/doc/diagrams/horizontal_line_sequence.md +++ b/doc/diagrams/horizontal_line_sequence.mmd @@ -1,4 +1,3 @@ -```mermaid sequenceDiagram participant User participant ILB as InteractiveLayerBase @@ -28,5 +27,4 @@ sequenceDiagram HLID->>HLID: 14. Set startPoint HLID->>HLAPM: 15. onDone() - Note over User,HLAPM: Drawing is added to chart and state returns to Normal -``` \ No newline at end of file + Note over User,HLAPM: Drawing is added to chart and state returns to Normal \ No newline at end of file diff --git a/doc/diagrams/interactive_layer_architecture.md b/doc/diagrams/interactive_layer_architecture.mmd similarity index 97% rename from doc/diagrams/interactive_layer_architecture.md rename to doc/diagrams/interactive_layer_architecture.mmd index c1042f8c4..3635dd8e3 100644 --- a/doc/diagrams/interactive_layer_architecture.md +++ b/doc/diagrams/interactive_layer_architecture.mmd @@ -1,4 +1,3 @@ -```mermaid flowchart TD UserInteractions["USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)"] @@ -40,5 +39,4 @@ flowchart TD UserInteractions --> InteractiveLayerBase InteractiveLayerBase --> DrawingToolCreation - Preview --> InteractableDrawing -``` \ No newline at end of file + Preview --> InteractableDrawing \ No newline at end of file diff --git a/scripts/convert_mmd_to_svg.sh.sh b/scripts/convert_mmd_to_svg.sh.sh new file mode 100644 index 000000000..96f67cf88 --- /dev/null +++ b/scripts/convert_mmd_to_svg.sh.sh @@ -0,0 +1,19 @@ +#!/bin/bash + +INPUT_DIR="./doc/diagrams" # Change this to your folder path + +# Check if mmdc is installed +if ! command -v mmdc &> /dev/null; then +echo "Error: Mermaid CLI (mmdc) is not installed." +echo "Use command npm install -g @mermaid-js/mermaid-cli to install it." +exit 1 +fi + +# Loop through all .mmd files in the folder +for file in "$INPUT_DIR"/*.mmd; do + [ -e "$file" ] || continue # Skip if no .mmd files + base_name=$(basename "$file" .mmd) + output_file="$INPUT_DIR/$base_name.svg" + echo "Generating SVG for $file -> $output_file" + mmdc -i "$file" -o "$output_file" +done \ No newline at end of file From 0eb6137930e07f9f26fcd1ca593d7696fc960327 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:30:09 +0800 Subject: [PATCH 157/311] update diagram images using mermaid CLI --- doc/diagrams/horizontal_line_sequence.svg | 2 +- doc/diagrams/interactive_layer_architecture.svg | 2 +- scripts/{convert_mmd_to_svg.sh.sh => convert_mmd_to_svg.sh} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename scripts/{convert_mmd_to_svg.sh.sh => convert_mmd_to_svg.sh} (100%) mode change 100644 => 100755 diff --git a/doc/diagrams/horizontal_line_sequence.svg b/doc/diagrams/horizontal_line_sequence.svg index db50c5547..904ab6dea 100644 --- a/doc/diagrams/horizontal_line_sequence.svg +++ b/doc/diagrams/horizontal_line_sequence.svg @@ -1 +1 @@ -HorizontalLineAddingPreviewMobileHorizontalLineInteractableDrawingInteractiveAddingToolStateMobileInteractiveLayerMobileBehaviourInteractiveLayerBaseUserHorizontalLineAddingPreviewMobileHorizontalLineInteractableDrawingInteractiveAddingToolStateMobileInteractiveLayerMobileBehaviourInteractiveLayerBaseUserState transitionDrawing is added to chart and state returns to Normal1. Select Horizontal Line2. onAddDrawingTool(config)3. updateStateTo(AddingToolStateMobile)4. Create HorizontalLineInteractableDrawing5. getAddingPreviewForMobileBehaviour()6. Create HorizontalLineAddingPreviewMobile7. Show preview on chart8. Drag to position line9. onDragUpdate()10. Update position11. Tap outside preview12. onTap()13. onCreateTap()14. Set startPoint15. onDone() \ No newline at end of file +HorizontalLineAddingPreviewMobileHorizontalLineInteractableDrawingInteractiveAddingToolStateMobileInteractiveLayerMobileBehaviourInteractiveLayerBaseUserHorizontalLineAddingPreviewMobileHorizontalLineInteractableDrawingInteractiveAddingToolStateMobileInteractiveLayerMobileBehaviourInteractiveLayerBaseUserState transitionDrawing is added to chart and state returns to Normal1. Select Horizontal Line2. onAddDrawingTool(config)3. updateStateTo(AddingToolStateMobile)4. Create HorizontalLineInteractableDrawing5. getAddingPreviewForMobileBehaviour()6. Create HorizontalLineAddingPreviewMobile7. Show preview on chart8. Drag to position line9. onDragUpdate()10. Update position11. Tap outside preview12. onTap()13. onCreateTap()14. Set startPoint15. onDone() \ No newline at end of file diff --git a/doc/diagrams/interactive_layer_architecture.svg b/doc/diagrams/interactive_layer_architecture.svg index 52c21bdfa..936c4dbf3 100644 --- a/doc/diagrams/interactive_layer_architecture.svg +++ b/doc/diagrams/interactive_layer_architecture.svg @@ -1 +1 @@ -

Drawing Tool Creation

Drawing Tool States

InteractableDrawing

DrawingAddingPreview

Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning

Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition

InteractiveLayerBase

InteractiveState

Normal State\n• Default state\n• Select tools\n• Start adding tools

Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation

Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview

InteractiveLayerBehaviour

Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning

Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets

USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)

 \ No newline at end of file +

Drawing Tool Creation

Drawing Tool States

InteractableDrawing

DrawingAddingPreview

Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning

Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition

InteractiveLayerBase

InteractiveState

Normal State\n• Default state\n• Select tools\n• Start adding tools

Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation

Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview

InteractiveLayerBehaviour

Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning

Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets

USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)

 \ No newline at end of file diff --git a/scripts/convert_mmd_to_svg.sh.sh b/scripts/convert_mmd_to_svg.sh old mode 100644 new mode 100755 similarity index 100% rename from scripts/convert_mmd_to_svg.sh.sh rename to scripts/convert_mmd_to_svg.sh From f4f08357b1f747cd758d6ee14a29fabe10cc1f73 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:36:17 +0800 Subject: [PATCH 158/311] fix EOF of diagram file --- doc/diagrams/horizontal_line_sequence.mmd | 14 +++++++------- doc/diagrams/interactive_layer_architecture.mmd | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/doc/diagrams/horizontal_line_sequence.mmd b/doc/diagrams/horizontal_line_sequence.mmd index cdad06f69..58f20ad1d 100644 --- a/doc/diagrams/horizontal_line_sequence.mmd +++ b/doc/diagrams/horizontal_line_sequence.mmd @@ -5,26 +5,26 @@ sequenceDiagram participant IATSM as InteractiveAddingToolStateMobile participant HLID as HorizontalLineInteractableDrawing participant HLAPM as HorizontalLineAddingPreviewMobile - + User->>ILB: 1. Select Horizontal Line ILB->>ILMB: 2. onAddDrawingTool(config) ILMB->>IATSM: 3. updateStateTo(AddingToolStateMobile) Note over ILMB,IATSM: State transition IATSM-->>ILMB: 4. Create HorizontalLineInteractableDrawing - + IATSM->>HLID: 5. getAddingPreviewForMobileBehaviour() HLID->>HLAPM: 6. Create HorizontalLineAddingPreviewMobile - + HLAPM->>ILB: 7. Show preview on chart - + User->>ILB: 8. Drag to position line ILB->>HLAPM: 9. onDragUpdate() HLAPM->>HLID: 10. Update position - + User->>ILB: 11. Tap outside preview ILB->>HLAPM: 12. onTap() HLAPM->>HLID: 13. onCreateTap() HLID->>HLID: 14. Set startPoint HLID->>HLAPM: 15. onDone() - - Note over User,HLAPM: Drawing is added to chart and state returns to Normal \ No newline at end of file + + Note over User,HLAPM: Drawing is added to chart and state returns to Normal diff --git a/doc/diagrams/interactive_layer_architecture.mmd b/doc/diagrams/interactive_layer_architecture.mmd index 3635dd8e3..0c33156c6 100644 --- a/doc/diagrams/interactive_layer_architecture.mmd +++ b/doc/diagrams/interactive_layer_architecture.mmd @@ -39,4 +39,4 @@ flowchart TD UserInteractions --> InteractiveLayerBase InteractiveLayerBase --> DrawingToolCreation - Preview --> InteractableDrawing \ No newline at end of file + Preview --> InteractableDrawing From 300beedd6fc59c34099ccc70472b89b22652d9f0 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:38:59 +0800 Subject: [PATCH 159/311] chore: update README file --- README.md | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 05b50cbd8..4848b34d8 100644 --- a/README.md +++ b/README.md @@ -442,13 +442,8 @@ To update a diagram: 1. Edit the Mermaid code in the corresponding file in the `doc/diagrams/` directory 2. Generate SVG files from the Mermaid code: - - Option 1: Use the [Mermaid Live Editor](https://mermaid.live/) - - Copy the Mermaid code from the `.md` file - - Paste it into the editor - - Export as SVG - - Save the SVG file to the same location as the `.md` file with the same name but `.svg` extension - - - Option 2: Use the Mermaid CLI + - Use the [Mermaid Live Editor](https://mermaid.live/) + - Use the scripts/convert_mmd_to_svg to generate SVG files - Refer to this details: ![mermaid-cli](https://github.com/mermaid-js/mermaid-cli) 3. The documentation files (like `doc/interactive_layer.md`) reference these SVG files using standard Markdown image syntax: From 57f813a2bddfa573b1611792223bc31cc92222a7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:42:01 +0800 Subject: [PATCH 160/311] chore: update README file --- README.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 4848b34d8..5d86315ad 100644 --- a/README.md +++ b/README.md @@ -439,14 +439,11 @@ The project uses Mermaid diagrams for visualizing architecture and processes. Th To update a diagram: -1. Edit the Mermaid code in the corresponding file in the `doc/diagrams/` directory +1. Update diagrams and generate SVG files from the Mermaid code: + - Update diagram code. You can use the [Mermaid Live Editor](https://mermaid.live/) or any other Mermaid-compatible editor. + - Use the ![mermaid_script](scripts/convert_mmd_to_svg.sh) to generate SVG files -2. Generate SVG files from the Mermaid code: - - Use the [Mermaid Live Editor](https://mermaid.live/) - - Use the scripts/convert_mmd_to_svg to generate SVG files - - Refer to this details: ![mermaid-cli](https://github.com/mermaid-js/mermaid-cli) - -3. The documentation files (like `doc/interactive_layer.md`) reference these SVG files using standard Markdown image syntax: +2. The documentation files (like `doc/interactive_layer.md`) reference these SVG files using standard Markdown image syntax: ```markdown ![Diagram Title](diagrams/diagram_filename.svg) ``` From 8c9bbd6fb31d683847e8f58792bb2a7459587db8 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:43:24 +0800 Subject: [PATCH 161/311] chore: code cleanup :recycle: --- scripts/convert_mmd_to_svg.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/convert_mmd_to_svg.sh b/scripts/convert_mmd_to_svg.sh index 96f67cf88..8498842d6 100755 --- a/scripts/convert_mmd_to_svg.sh +++ b/scripts/convert_mmd_to_svg.sh @@ -1,6 +1,6 @@ #!/bin/bash -INPUT_DIR="./doc/diagrams" # Change this to your folder path +INPUT_DIR="./doc/diagrams" # Check if mmdc is installed if ! command -v mmdc &> /dev/null; then From 36ed044b1dde3ae587daf0f48975bf633e73e1c7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:44:26 +0800 Subject: [PATCH 162/311] chore: update README file --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 5d86315ad..ae807f150 100644 --- a/README.md +++ b/README.md @@ -437,8 +437,6 @@ The project uses Mermaid diagrams for visualizing architecture and processes. Th ### Updating Diagrams -To update a diagram: - 1. Update diagrams and generate SVG files from the Mermaid code: - Update diagram code. You can use the [Mermaid Live Editor](https://mermaid.live/) or any other Mermaid-compatible editor. - Use the ![mermaid_script](scripts/convert_mmd_to_svg.sh) to generate SVG files From 72af106d12d99e08bfc47c4f4b03ae7fb9cf5143 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:49:31 +0800 Subject: [PATCH 163/311] add interactiveLayerBehaviour param to DerivChart widget --- lib/src/deriv_chart/deriv_chart.dart | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index f709e28a1..ba9579f0f 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -65,6 +65,7 @@ class DerivChart extends StatefulWidget { this.showDataFitButton, this.showScrollToLastTickButton, this.loadingAnimationColor, + this.interactiveLayerBehaviour, Key? key, }) : super(key: key); @@ -179,6 +180,16 @@ class DerivChart extends StatefulWidget { /// Drawing tools final DrawingTools? drawingTools; + /// Defines the behaviour that interactive layer should have. + /// + /// Interactive layer is the layer on top of the chart responsible for + /// handling components that user can interact with them. such as cross-hair, + /// drawing tools, etc. + /// + /// If not set it will be set internally to [InteractiveLayerDesktopBehaviour] + /// on web and [InteractiveLayerMobileBehaviour] on mobile or other platforms. + final InteractiveLayerBehaviour? interactiveLayerBehaviour; + @override _DerivChartState createState() => _DerivChartState(); } From d6e5ddb50cd7eeb591e4505168f67e2e3e7ab838 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 16:55:34 +0800 Subject: [PATCH 164/311] chore: remove a method implemetation in DrawingV2 interface --- .../interactable_drawings/drawing_v2.dart | 6 +----- .../trend_line/adding_tool_alignment_cross_hair.dart | 8 ++++++++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index 580789a96..3843a616a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -87,11 +87,7 @@ abstract class DrawingV2 { bool shouldRepaint( Set drawingState, DrawingV2 oldDrawing, - ) { - return drawingState.contains(DrawingToolState.dragging) || - drawingState.contains(DrawingToolState.adding) || - drawingState.contains(DrawingToolState.animating); - } + ); /// Whether this drawing is in epoch range. bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index b0d50774b..363d71f5a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/gestures.dart'; @@ -55,4 +56,11 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { @override void onDragStart(DragStartDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) {} + + @override + bool shouldRepaint( + Set drawingState, + DrawingV2 oldDrawing, + ) => + true; } From ccae82d895e1d30c564fda56fbce0a13a21df1a7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 17:24:09 +0800 Subject: [PATCH 165/311] chore: code cleanup :recycle: --- .../interactive_layer_mobile_behaviour.dart | 2 +- .../interactive_adding_tool_state.dart | 26 +++++-------------- .../interactive_adding_tool_state_mobile.dart | 25 ++++++++++++++++++ 3 files changed, 32 insertions(+), 21 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state_mobile.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart index 0d54f5a07..d85be2189 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart @@ -3,7 +3,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import '../enums/state_change_direction.dart'; import '../interactable_drawings/drawing_adding_preview.dart'; import '../interactable_drawings/interactable_drawing.dart'; -import '../interactive_layer_states/interactive_adding_tool_state.dart'; +import '../interactive_layer_states/interactive_adding_tool_state_mobile.dart'; import 'interactive_layer_behaviour.dart'; /// The mobile-specific implementation of the interactive layer behaviour. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 195ae403e..73dbe1f17 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -49,6 +49,10 @@ class InteractiveAddingToolState extends InteractiveState /// to render a preview of the drawing being added. DrawingAddingPreview? _addingDrawing; + /// Getter to get the adding drawing preview instance. + DrawingAddingPreview? get addingDrawingPreview => _addingDrawing; + + @override List get previewDrawings => [if (_addingDrawing != null) _addingDrawing!]; @@ -61,16 +65,14 @@ class InteractiveAddingToolState extends InteractiveState .id : null; - final state = drawing.id == addingDrawingId + final Set states = drawing.id == addingDrawingId ? { DrawingToolState.adding, if (_isAddingToolBeingDragged) DrawingToolState.dragging } : {DrawingToolState.idle}; - // print( - // '#### State for ${drawing.runtimeType} is: $state, $_isAddingToolBeingDragged, ${drawing.id}, $addingDrawingId'); - return state; + return states; } @override @@ -153,19 +155,3 @@ class InteractiveAddingToolState extends InteractiveState }); } } - -/// The mobile-specific implementation of the interactive adding tool state. -class InteractiveAddingToolStateMobile extends InteractiveAddingToolState { - /// Adding tool state for mobile devices. - InteractiveAddingToolStateMobile( - super.addingTool, { - required super.interactiveLayerBehaviour, - }); - - @override - void onTap(TapUpDetails details) { - if (!_addingDrawing!.hitTest(details.localPosition, epochToX, quoteToY)) { - super.onTap(details); - } - } -} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state_mobile.dart new file mode 100644 index 000000000..607e9c331 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state_mobile.dart @@ -0,0 +1,25 @@ +import 'package:flutter/gestures.dart'; + +import 'interactive_adding_tool_state.dart'; + +/// The mobile-specific implementation of the interactive adding tool state. +class InteractiveAddingToolStateMobile extends InteractiveAddingToolState { + /// Adding tool state for mobile devices. + InteractiveAddingToolStateMobile( + super.addingTool, { + required super.interactiveLayerBehaviour, + }); + + @override + void onTap(TapUpDetails details) { + if (!(addingDrawingPreview?.hitTest( + details.localPosition, epochToX, quoteToY) ?? + true)) { + // The tap was outside of the adding drawing preview. This means according + // to the way we want to have tool addition flow we should set current + // point's position and go to the next step (next point or finish adding + // the tool). + super.onTap(details); + } + } +} From 3eaf524dded94056d737888d2c65e6ba02fcd387 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 17:47:41 +0800 Subject: [PATCH 166/311] chore: update docs --- .../horizontal_line_adding_preview_desktop.dart | 6 ++++-- .../horizontal_line_adding_preview_mobile.dart | 4 +++- .../trend_line/trend_line_adding_preview_desktop.dart | 5 ++++- .../trend_line/trend_line_adding_preview_mobile.dart | 5 +++-- .../trend_line/trend_line_interactable_drawing.dart | 2 +- 5 files changed, 15 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index b0ae8990b..0c6d5e73a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -3,14 +3,16 @@ import 'dart:ui'; 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/edge_point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:flutter/gestures.dart'; import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; -/// Adding preview for horizontal line when we're adding the line tool on -/// [InteractiveLayerMobileBehaviour]. +/// A class to show a preview and handle adding +/// [HorizontalLineInteractableDrawing] to the chart. It's for when we're on +/// [InteractiveLayerDesktopBehaviour] class HorizontalLineAddingPreviewDesktop extends DrawingAddingPreview { /// Initializes [HorizontalLineInteractableDrawing]. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index e40dad62c..974d513aa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -4,13 +4,15 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. 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/interactive_layer/helpers/paint_helpers.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:flutter/gestures.dart'; import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; -/// Adding preview for horizontal line when we're adding the line tool on +/// A class to show a preview and handle adding a +/// [HorizontalLineInteractableDrawing] to the chart. It's for when we're on /// [InteractiveLayerMobileBehaviour]. class HorizontalLineAddingPreviewMobile extends DrawingAddingPreview { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index 7098d2d41..e15743550 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -13,7 +14,9 @@ import '../drawing_adding_preview.dart'; import 'adding_tool_alignment_cross_hair.dart'; import 'trend_line_interactable_drawing.dart'; -/// Interactable drawing for line drawing tool. +/// Can be used to show a preview line for a [TrendLineInteractableDrawing] when +/// adding it to the chart. It's for when we're on +/// [InteractiveLayerDesktopBehaviour] class TrendLineAddingPreviewDesktop extends DrawingAddingPreview { /// Initializes [TrendLineInteractableDrawing]. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index a82386989..7f69c9c7f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -3,6 +3,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/interactive_layer/enums/drawing_tool_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; @@ -12,8 +13,8 @@ import '../drawing_adding_preview.dart'; import '../drawing_v2.dart'; import 'trend_line_interactable_drawing.dart'; -/// A Line interactable just for the preview of the line when we're adding the -/// line tool on mobile. +/// A class to show a preview and handle adding a [TrendLineInteractableDrawing] +/// to the chart. This is for when we're on [InteractiveLayerMobileBehaviour] class TrendLineAddingPreviewMobile extends DrawingAddingPreview { /// Initializes [TrendLineInteractableDrawing]. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 7a9794df9..ad98ce4b7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -20,7 +20,7 @@ import '../interactable_drawing.dart'; import 'trend_line_adding_preview_desktop.dart'; import 'trend_line_adding_preview_mobile.dart'; -/// Interactable drawing for line drawing tool. +/// Interactable drawing for trend-line drawing tool. class TrendLineInteractableDrawing extends InteractableDrawing { /// Initializes [TrendLineInteractableDrawing]. From cb26f0d8ba6cafc76824ee1c45c2b0ab5d9d2fac Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 17:54:03 +0800 Subject: [PATCH 167/311] chore: update docs --- .../interactive_layer_behaviour.dart | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 4e8013ce0..62fa528c0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -2,6 +2,8 @@ import 'dart:async'; import 'dart:ui'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:flutter/gestures.dart'; import '../enums/drawing_tool_state.dart'; @@ -14,7 +16,16 @@ import '../interactive_layer_states/interactive_adding_tool_state.dart'; import '../interactive_layer_states/interactive_normal_state.dart'; import '../interactive_layer_states/interactive_state.dart'; -/// The base class for managing the interactive layer. +/// The base class for managing [InteractiveLayerBase]'s behaviour according to +/// a platform or a condition. +/// [InteractiveLayerBase] uses this to manage gestures and the layer state in +/// every scenarios. +/// The way we're handling the gestures and [_interactiveState] transitions can +/// be customized by extending this class. +/// +/// Check out [InteractiveLayerMobileBehaviour] and +/// [InteractiveLayerDesktopBehaviour] to see specific implementations for two +/// different platforms. abstract class InteractiveLayerBehaviour { late InteractiveState _interactiveState; @@ -69,7 +80,12 @@ abstract class InteractiveLayerBehaviour { Set getToolState(DrawingV2 drawing) => _interactiveState.getToolState(drawing); - /// The drawings of the interactive layer. + /// The extra drawings that the current interactive state can show in + /// [InteractiveLayerBase]. + /// + /// These [previewDrawings] are usually supposed to be drawings that have + /// shorter lifespan just for preview or showing a temporary guids when user + /// is interacting with [InteractiveLayerBase]. List get previewDrawings => _interactiveState.previewDrawings; /// Handles tap event. From 0057328b635b0f66e848f474c4fb44a16b344cc5 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 18:29:34 +0800 Subject: [PATCH 168/311] chore: code cleanup :recycle: --- .../interactive_layer_behaviour.dart | 33 ++++++++--------- .../interactive_adding_tool_state.dart | 35 +++++++++---------- lib/src/models/axis_range.dart | 2 +- scripts/convert_mmd_to_svg.sh | 2 +- 4 files changed, 33 insertions(+), 39 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 62fa528c0..7816be6b0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -29,7 +29,7 @@ import '../interactive_layer_states/interactive_state.dart'; abstract class InteractiveLayerBehaviour { late InteractiveState _interactiveState; - /// Initializes the interactive layer manager. + /// Initializes the [InteractiveLayerBehaviour]. void init({ required InteractiveLayerBase interactiveLayer, required VoidCallback onUpdate, @@ -44,6 +44,9 @@ abstract class InteractiveLayerBehaviour { DrawingAddingPreview getAddingDrawingPreview(InteractableDrawing drawing); /// Updates the interactive layer state to the new state. + /// + /// Calls [onUpdate] callback to notify the interactive layer to update its + /// UI after the state change. Future updateStateTo( InteractiveState newState, StateChangeAnimationDirection direction, { @@ -83,33 +86,25 @@ abstract class InteractiveLayerBehaviour { /// The extra drawings that the current interactive state can show in /// [InteractiveLayerBase]. /// - /// These [previewDrawings] are usually supposed to be drawings that have - /// shorter lifespan just for preview or showing a temporary guids when user - /// is interacting with [InteractiveLayerBase]. + /// These [previewDrawings] are usually meant to be drawings with a shorter + /// lifespan, used for preview purposes or for showing temporary guides when + /// the user is interacting with [InteractiveLayerBase]. List get previewDrawings => _interactiveState.previewDrawings; /// Handles tap event. - void onTap(TapUpDetails details) { - _interactiveState.onTap(details); - } + void onTap(TapUpDetails details) => _interactiveState.onTap(details); /// Handles pan update event. - void onPanUpdate(DragUpdateDetails details) { - _interactiveState.onPanUpdate(details); - } + void onPanUpdate(DragUpdateDetails details) => + _interactiveState.onPanUpdate(details); /// Handles pan end event. - void onPanEnd(DragEndDetails details) { - _interactiveState.onPanEnd(details); - } + void onPanEnd(DragEndDetails details) => _interactiveState.onPanEnd(details); /// Handles pan start event. - void onPanStart(DragStartDetails details) { - _interactiveState.onPanStart(details); - } + void onPanStart(DragStartDetails details) => + _interactiveState.onPanStart(details); /// Handles hover event. - void onHover(PointerHoverEvent event) { - _interactiveState.onHover(event); - } + void onHover(PointerHoverEvent event) => _interactiveState.onHover(event); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 73dbe1f17..c0896f52f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -31,7 +31,7 @@ class InteractiveAddingToolState extends InteractiveState this.addingTool, { required super.interactiveLayerBehaviour, }) { - _addingDrawing ??= interactiveLayerBehaviour + _drawingPreview ??= interactiveLayerBehaviour .getAddingDrawingPreview(addingTool.getInteractableDrawing()); } @@ -47,21 +47,20 @@ class InteractiveAddingToolState extends InteractiveState /// /// This is initialized when the user first taps on the chart and is used /// to render a preview of the drawing being added. - DrawingAddingPreview? _addingDrawing; - - /// Getter to get the adding drawing preview instance. - DrawingAddingPreview? get addingDrawingPreview => _addingDrawing; + DrawingAddingPreview? _drawingPreview; + /// Getter to get the [_drawingPreview] instance. + DrawingAddingPreview? get addingDrawingPreview => _drawingPreview; @override List get previewDrawings => - [if (_addingDrawing != null) _addingDrawing!]; + [if (_drawingPreview != null) _drawingPreview!]; @override Set getToolState(DrawingV2 drawing) { - final String? addingDrawingId = _addingDrawing != null + final String? addingDrawingId = _drawingPreview != null ? interactiveLayerBehaviour - .getAddingDrawingPreview(_addingDrawing!.interactableDrawing) + .getAddingDrawingPreview(_drawingPreview!.interactableDrawing) .id : null; @@ -81,19 +80,19 @@ class InteractiveAddingToolState extends InteractiveState _isAddingToolBeingDragged = false; } - if (_addingDrawing?.hitTest(details.localPosition, epochToX, quoteToY) ?? + if (_drawingPreview?.hitTest(details.localPosition, epochToX, quoteToY) ?? false) { - _addingDrawing! + _drawingPreview! .onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); } } @override void onPanStart(DragStartDetails details) { - if (_addingDrawing?.hitTest(details.localPosition, epochToX, quoteToY) ?? + if (_drawingPreview?.hitTest(details.localPosition, epochToX, quoteToY) ?? false) { _isAddingToolBeingDragged = true; - _addingDrawing!.onDragStart( + _drawingPreview!.onDragStart( details, epochFromX, quoteFromY, @@ -107,9 +106,9 @@ class InteractiveAddingToolState extends InteractiveState @override void onPanUpdate(DragUpdateDetails details) { - if (_addingDrawing != null) { - if (_addingDrawing!.hitTest(details.localPosition, epochToX, quoteToY)) { - _addingDrawing!.onDragUpdate( + if (_drawingPreview != null) { + if (_drawingPreview!.hitTest(details.localPosition, epochToX, quoteToY)) { + _drawingPreview!.onDragUpdate( details, epochFromX, quoteFromY, @@ -122,7 +121,7 @@ class InteractiveAddingToolState extends InteractiveState @override void onHover(PointerHoverEvent event) { - _addingDrawing?.onHover( + _drawingPreview?.onHover( event, epochFromX, quoteFromY, @@ -133,12 +132,12 @@ class InteractiveAddingToolState extends InteractiveState @override void onTap(TapUpDetails details) { - _addingDrawing! + _drawingPreview! .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { interactiveLayer.clearAddingDrawing(); final DrawingToolConfig addedConfig = - interactiveLayer.onAddDrawing(_addingDrawing!.interactableDrawing); + interactiveLayer.onAddDrawing(_drawingPreview!.interactableDrawing); for (final drawing in interactiveLayer.drawings) { if (drawing.config.configId == addedConfig.configId) { diff --git a/lib/src/models/axis_range.dart b/lib/src/models/axis_range.dart index 00a431a78..ef58a6cb4 100644 --- a/lib/src/models/axis_range.dart +++ b/lib/src/models/axis_range.dart @@ -4,7 +4,7 @@ import 'package:equatable/equatable.dart'; /// Can use to represent the x-axis range on the chart. class EpochRange with EquatableMixin { /// Initializes. - EpochRange({required this.rightEpoch, required this.leftEpoch}); + EpochRange({required this.leftEpoch, required this.rightEpoch}); /// The left-most epoch. final int leftEpoch; diff --git a/scripts/convert_mmd_to_svg.sh b/scripts/convert_mmd_to_svg.sh index 8498842d6..bd01319f1 100755 --- a/scripts/convert_mmd_to_svg.sh +++ b/scripts/convert_mmd_to_svg.sh @@ -16,4 +16,4 @@ for file in "$INPUT_DIR"/*.mmd; do output_file="$INPUT_DIR/$base_name.svg" echo "Generating SVG for $file -> $output_file" mmdc -i "$file" -o "$output_file" -done \ No newline at end of file +done From e4259d6c23f5de99e8ac74b1eadba492e2a419cb Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 18:56:29 +0800 Subject: [PATCH 169/311] chore: update docs --- doc/interactive_layer.md | 46 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index 20caa515b..ba10a0f7a 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -6,9 +6,10 @@ The Interactive Layer is a crucial component of the Deriv Chart that handles use The Interactive Layer sits on top of the chart canvas and captures user gestures such as taps, drags, and hovers. It then interprets these gestures based on the current state and translates them into actions on drawing tools. -The layer works with two key concepts: +The layer works with three key concepts: 1. **InteractiveState**: Defines the current mode of interaction with the chart 2. **DrawingToolState**: Represents the state of individual drawing tools +3. **InteractiveLayerBehaviour**: Defines platform-specific interaction handling and customizes state transitions ## Interactive States @@ -48,6 +49,47 @@ This is implemented as a mixin rather than a standalone state, allowing it to be This mixin-based approach allows hover functionality to be reused across different states without code duplication, following the composition over inheritance principle. +## InteractiveLayerBehaviour + +The `InteractiveLayerBehaviour` is an abstract class that defines how user interactions are processed and how state transitions occur within the Interactive Layer. It serves as a bridge between raw user input events and the state-based architecture of the Interactive Layer. + +Key responsibilities of `InteractiveLayerBehaviour`: + +- Processing platform-specific user interactions (mouse events on desktop, touch events on mobile) +- Managing transitions between different `InteractiveState` instances +- Providing appropriate drawing tool previews based on the platform +- Coordinating with `DrawingAddingPreview` to handle the drawing creation process + +### Customizing State Transitions + +One of the most important aspects of `InteractiveLayerBehaviour` is its ability to customize how transitions between different `InteractiveState` instances occur. This allows for: + +- Platform-specific transition logic (e.g., different gesture recognition on mobile vs. desktop) +- Conditional transitions based on the current context or user preferences +- Custom animation or feedback during state changes +- Different interaction patterns for different types of users or use cases + +While each `InteractiveState` implementation has its own default behavior for transitioning to other states, the `InteractiveLayerBehaviour` can override these defaults and use entirely different `InteractiveState` implementations. This creates a powerful customization mechanism where the entire interaction flow can be tailored to specific requirements without modifying the core state classes. + +For example, on desktop platforms, a transition from `InteractiveNormalState` to `InteractiveSelectedToolState` might occur on a single click, while on mobile platforms it might require a longer press to avoid accidental selections. Similarly, a custom implementation might use specialized state classes optimized for particular use cases or user preferences. +`InteractiveAddingToolStateMobile` is another example which to have a bit different behaviour when adding a tool on `InteractiveLayerMobileBehaviour` is chosen as the behaviour. + +### Platform-Specific Implementations + +The Interactive Layer provides different implementations of `InteractiveLayerBehaviour` for different platforms: + +- **InteractiveLayerDesktopBehaviour**: Optimized for mouse and keyboard interactions, supporting hover events, precise clicking, and keyboard shortcuts +- **InteractiveLayerMobileBehaviour**: Optimized for touch interactions, with larger touch targets, gesture recognition, and multi-touch support + +This separation allows the Interactive Layer to provide a consistent conceptual model across platforms while adapting the specific interaction patterns to match platform conventions and capabilities. + +Beyond platform-specific implementations, custom `InteractiveLayerBehaviour` implementations can be created to support: + +- Specialized input devices (e.g., stylus, touchpad) +- Accessibility features for users with different needs +- Testing or automation scenarios +- Domain-specific interaction patterns for particular types of charts or analyses + ## State Transitions The Interactive Layer manages transitions between states based on user interactions: @@ -63,7 +105,7 @@ For a comprehensive visual representation of the architecture and state transiti ## DrawingToolState -Each drawing tool on the chart has its own state, represented by the `DrawingToolState` enum: +Each drawing tool on the chart has its own set of state, represented by the `DrawingToolState` enum: ```dart enum DrawingToolState { From 99c74f1a3c8b9c05b827d6292c0667230179ae13 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 22:06:20 +0800 Subject: [PATCH 170/311] chore: update docs --- doc/interactive_layer.md | 69 ++++++++++++++++++++++++++++------------ 1 file changed, 48 insertions(+), 21 deletions(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index ba10a0f7a..56086e3fb 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -6,10 +6,13 @@ The Interactive Layer is a crucial component of the Deriv Chart that handles use The Interactive Layer sits on top of the chart canvas and captures user gestures such as taps, drags, and hovers. It then interprets these gestures based on the current state and translates them into actions on drawing tools. -The layer works with three key concepts: +The layer works with several key concepts: 1. **InteractiveState**: Defines the current mode of interaction with the chart -2. **DrawingToolState**: Represents the state of individual drawing tools -3. **InteractiveLayerBehaviour**: Defines platform-specific interaction handling and customizes state transitions +2. **InteractiveLayerBehaviour**: Defines platform-specific interaction handling and customizes state transitions +3. **DrawingV2**: The base interface for all drawable elements on the chart +4. **InteractiveLayerBase**: The core component that manages states and coordinates interactions +5. **InteractableDrawing**: Concrete implementations of drawing tools that can be interacted with +6. **DrawingAddingPreview**: Specialized components for handling the drawing creation process ## Interactive States @@ -72,7 +75,8 @@ One of the most important aspects of `InteractiveLayerBehaviour` is its ability While each `InteractiveState` implementation has its own default behavior for transitioning to other states, the `InteractiveLayerBehaviour` can override these defaults and use entirely different `InteractiveState` implementations. This creates a powerful customization mechanism where the entire interaction flow can be tailored to specific requirements without modifying the core state classes. For example, on desktop platforms, a transition from `InteractiveNormalState` to `InteractiveSelectedToolState` might occur on a single click, while on mobile platforms it might require a longer press to avoid accidental selections. Similarly, a custom implementation might use specialized state classes optimized for particular use cases or user preferences. -`InteractiveAddingToolStateMobile` is another example which to have a bit different behaviour when adding a tool on `InteractiveLayerMobileBehaviour` is chosen as the behaviour. + +Another example is `InteractiveAddingToolStateMobile`, which provides different behavior when adding a tool with `InteractiveLayerMobileBehaviour`. This specialized state implementation works specifically with the mobile behavior to provide touch-optimized drawing tool creation. ### Platform-Specific Implementations @@ -90,22 +94,21 @@ Beyond platform-specific implementations, custom `InteractiveLayerBehaviour` imp - Testing or automation scenarios - Domain-specific interaction patterns for particular types of charts or analyses -## State Transitions +## DrawingV2 + +`DrawingV2` is the base interface for all drawable elements on the chart. It defines the core functionality that any drawing must implement to be rendered and managed by the Interactive Layer: -The Interactive Layer manages transitions between states based on user interactions: +1. **Painting**: Renders the drawing on the canvas with appropriate visual styles based on its current state, including colors, line styles, and interactive elements like control points when needed. -1. **NormalState → SelectedToolState**: Occurs when the user taps on or starts dragging an existing drawing tool -2. **SelectedToolState → NormalState**: Occurs when the user taps outside the selected tool -3. **NormalState → AddingToolState**: Occurs when the user initiates adding a new drawing tool -4. **AddingToolState → NormalState**: Occurs when the new tool creation is complete +2. **Hit Testing**: Determines if a user's interaction point intersects with the drawing, using geometry-specific algorithms that can distinguish between different parts of the drawing (edges, control points, etc.). -Note that both NormalState and SelectedToolState include the HoverState functionality through the mixin pattern. +3. **Bounds Calculation**: Provides the drawing's bounding rectangle and other key points, ensuring accurate layout and efficient rendering even as the drawing is modified. -For a comprehensive visual representation of the architecture and state transitions, see the Interactive Layer Architecture Diagram section below. +4. **Handle User Interaction Gestures**: Processes user inputs (taps, drags, hovers) and responds with appropriate state changes and visual feedback based on the current context. -## DrawingToolState +### DrawingToolState -Each drawing tool on the chart has its own set of state, represented by the `DrawingToolState` enum: +Each drawing tool that implements `DrawingV2` has its own state, represented by the `DrawingToolState` enum: ```dart enum DrawingToolState { @@ -141,7 +144,11 @@ enum DrawingToolState { } ``` -The state of a drawing tool affects how it's rendered on the chart and how it responds to user interactions. +The state of a drawing tool affects how it's rendered on the chart and how it responds to user interactions. All implementations of `DrawingV2` must manage their state and respond appropriately to state changes as part of their responsibility to handle user interaction gestures. + +### Summary + +`DrawingV2` serves as the foundation for all drawable elements in the Interactive Layer, defining four essential responsibilities: painting visual representations on the canvas, performing precise hit testing for user interactions, calculating accurate bounding areas, and handling user interaction gestures. The `DrawingToolState` enum works in conjunction with `DrawingV2` to define the possible states a drawing can be in (idle, selected, hovered, adding, dragging, or animating), which affects both its visual appearance and interaction behavior. This design creates a flexible system where drawings can adapt their appearance and behavior based on their current state while maintaining a consistent interface for the Interactive Layer to work with. ## InteractableDrawing @@ -176,14 +183,14 @@ Key characteristics of `DrawingAddingPreview`: - It provides the `onCreateTap` method that captures user taps to define the drawing's shape - Different drawing tools require different numbers of taps to complete (e.g., a horizontal line may require just one tap, while a trend line requires two taps) -### Platform-Specific Behaviors +### Preview Implementations for Different Platforms -The Interactive Layer supports different behaviors based on the platform (desktop or mobile) through the `InteractiveLayerBehaviour` abstract class: +As mentioned in the InteractiveLayerBehaviour section, the system supports different behaviors based on the platform. Each drawing tool leverages this by providing specialized preview implementations: -- **Desktop Behavior**: Optimized for mouse interactions, including hover events and precise clicking -- **Mobile Behavior**: Optimized for touch interactions, with appropriate touch targets and gestures +- Each drawing tool implements the `getAddingPreviewForDesktopBehaviour()` method to return a desktop-optimized preview +- Each drawing tool implements the `getAddingPreviewForMobileBehaviour()` method to return a mobile-optimized preview -Each drawing tool can provide different preview implementations for desktop and mobile through the `getAddingPreviewForDesktopBehaviour` and `getAddingPreviewForMobileBehaviour` methods in `InteractableDrawing`. +These methods ensure that the drawing creation experience is tailored to the input capabilities of each platform while maintaining a consistent conceptual model. ## Implementation Details @@ -289,4 +296,24 @@ To illustrate how the Interactive Layer components work together in practice, le 9. **Result**: A horizontal line is now displayed on the chart at the position where the user tapped, and the system returns to the normal state where the user can select or add other drawings. -This example demonstrates how the various components of the Interactive Layer work together to provide a smooth and intuitive drawing experience, with platform-specific behavior handled through the appropriate preview classes. \ No newline at end of file +This example demonstrates how the various components of the Interactive Layer work together to provide a smooth and intuitive drawing experience, with platform-specific behavior handled through the appropriate preview classes. + +## Summary + +The Interactive Layer is a sophisticated component of the Deriv Chart that manages user interactions with drawing tools through a state-based architecture. It consists of several key components working together: + +- **InteractiveState**: Defines different modes of interaction (normal, selected, adding) +- **InteractiveLayerBehaviour**: Provides platform-specific interaction handling and customizes state transitions +- **DrawingV2**: The base interface for all drawable elements with responsibilities for painting, hit testing, bounds calculation, and handling user interactions +- **InteractiveLayerBase**: The core component that coordinates states and interactions +- **InteractableDrawing**: Concrete implementations of drawing tools that users can interact with +- **DrawingAddingPreview**: Specialized components for handling the drawing creation process + +The architecture follows a clean separation of concerns, with each component having well-defined responsibilities. This design enables: + +1. Platform-specific optimizations for both desktop and mobile experiences +2. Flexible state transitions that can be customized based on platform or other conditions +3. Consistent drawing tool behavior with appropriate visual feedback +4. Extensibility for adding new drawing tools or interaction modes + +By leveraging this architecture, the Interactive Layer provides an intuitive and responsive drawing experience that adapts to different platforms while maintaining a consistent conceptual model. \ No newline at end of file From 48712a551b286787390a2a3306fe5759aac22301 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 22:14:25 +0800 Subject: [PATCH 171/311] chore: update docs --- doc/interactive_layer.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index 56086e3fb..780164bc8 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -7,10 +7,10 @@ The Interactive Layer is a crucial component of the Deriv Chart that handles use The Interactive Layer sits on top of the chart canvas and captures user gestures such as taps, drags, and hovers. It then interprets these gestures based on the current state and translates them into actions on drawing tools. The layer works with several key concepts: -1. **InteractiveState**: Defines the current mode of interaction with the chart +1. **InteractiveState**: Different subclasses/implementations will define a state that interactive layer can be. (adding a tool, a tool being selected, etc) 2. **InteractiveLayerBehaviour**: Defines platform-specific interaction handling and customizes state transitions 3. **DrawingV2**: The base interface for all drawable elements on the chart -4. **InteractiveLayerBase**: The core component that manages states and coordinates interactions +4. **InteractiveLayerBase**: The base class that defines the UI interface for the interactive layer, captures user gestures, and visually renders the layer state on the chart. In the package, it's implemented by a widget stacked on top of the chart. 5. **InteractableDrawing**: Concrete implementations of drawing tools that can be interacted with 6. **DrawingAddingPreview**: Specialized components for handling the drawing creation process @@ -150,6 +150,24 @@ The state of a drawing tool affects how it's rendered on the chart and how it re `DrawingV2` serves as the foundation for all drawable elements in the Interactive Layer, defining four essential responsibilities: painting visual representations on the canvas, performing precise hit testing for user interactions, calculating accurate bounding areas, and handling user interaction gestures. The `DrawingToolState` enum works in conjunction with `DrawingV2` to define the possible states a drawing can be in (idle, selected, hovered, adding, dragging, or animating), which affects both its visual appearance and interaction behavior. This design creates a flexible system where drawings can adapt their appearance and behavior based on their current state while maintaining a consistent interface for the Interactive Layer to work with. +## InteractiveLayerBase + +The `InteractiveLayerBase` is an abstract class that defines the interface for the UI component of the Interactive Layer. It serves as the visual representation of the Interactive Layer that is shown to the user and is responsible for: + +1. Capturing user gestures (taps, drags, hovers) directly from the chart's UI +2. Visually rendering the current state of the Interactive Layer on the chart +3. Managing the collection of drawing tools and their visual representation +4. Coordinating between user input and the appropriate `InteractiveLayerBehaviour` +5. Displaying visual feedback based on the current `InteractiveState` + +In the package implementation, `InteractiveLayerBase` is implemented by a Flutter widget that is stacked on top of the chart's widget stack. This positioning allows it to: + +- Intercept all user gestures before they reach the underlying chart +- Render drawings and interactive elements above the chart's data visualization +- Provide a transparent overlay that doesn't interfere with chart visibility + +The `InteractiveLayerBase` acts as the bridge between the user interface and the internal state management system of the Interactive Layer. It translates raw touch/mouse events into meaningful interactions based on the current state and behavior configuration, then renders the appropriate visual representation back to the user. + ## InteractableDrawing The `InteractableDrawing` class is the base class for all drawing tools that can be interacted with on the chart. It: From 222c4d816280738545ea123ab724c573d85a2ee5 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 23:19:05 +0800 Subject: [PATCH 172/311] add key to interactive layer custom painter --- lib/src/deriv_chart/interactive_layer/interactive_layer.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 37aacd550..d5f257097 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -346,6 +346,7 @@ class _InteractiveLayerGestureHandlerState : [ ...widget.drawings .map((e) => CustomPaint( + key: ValueKey(e.id), foregroundPainter: InteractableDrawingCustomPainter( drawing: e, @@ -375,6 +376,7 @@ class _InteractiveLayerGestureHandlerState .toList(), ...widget.interactiveLayerBehaviour.previewDrawings .map((e) => CustomPaint( + key: ValueKey(e.id), foregroundPainter: InteractableDrawingCustomPainter( drawing: e, From 9823f02f27e6088c41dca1e61d49512dd4a386cd Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 14 May 2025 23:29:31 +0800 Subject: [PATCH 173/311] fix: fix drawing style change not affecting --- .../interactable_drawings/interactable_drawing.dart | 3 ++- lib/src/deriv_chart/interactive_layer/interactive_layer.dart | 4 ---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index e429f07c5..2ede04e55 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -102,7 +102,8 @@ abstract class InteractableDrawing Set drawingState, covariant InteractableDrawing oldDrawing, ) { - return drawingState.contains(DrawingToolState.dragging) || + return config != oldDrawing.config || + drawingState.contains(DrawingToolState.dragging) || drawingState.contains(DrawingToolState.adding) || drawingState.contains(DrawingToolState.animating); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index d5f257097..920410cf0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -98,10 +98,6 @@ class _InteractiveLayerState extends State { } void _setDrawingsFromConfigs() { - if (widget.drawingToolsRepo.items.length == _interactableDrawings.length) { - return; - } - _interactableDrawings.clear(); for (final config in widget.drawingToolsRepo.items) { From 84d7af755714fc3d58b8799d9af7e3c8ffccf014 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 15 May 2025 11:54:24 +0800 Subject: [PATCH 174/311] update drawing tools architecture diagram --- .../interactive_layer_architecture.mmd | 30 +++++++++++-------- .../interactive_layer_architecture.svg | 2 +- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/doc/diagrams/interactive_layer_architecture.mmd b/doc/diagrams/interactive_layer_architecture.mmd index 0c33156c6..ea1100c00 100644 --- a/doc/diagrams/interactive_layer_architecture.mmd +++ b/doc/diagrams/interactive_layer_architecture.mmd @@ -2,22 +2,26 @@ flowchart TD UserInteractions["USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)"] subgraph InteractiveLayerBase["InteractiveLayerBase"] - subgraph Behaviour["InteractiveLayerBehaviour"] - DesktopBehaviour["Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning"] - MobileBehaviour["Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets"] + subgraph Behaviour["InteractiveLayerBehaviour (Abstract)"] + BehaviourNote["Controls & customizes\nstate transitions"] - DesktopBehaviour <--> MobileBehaviour + subgraph States["InteractiveState"] + NormalState["Normal State\n• Default state\n• Select tools\n• Start adding tools"] + SelectedState["Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation"] + AddingState["Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview"] + + NormalState <--> SelectedState + NormalState --> AddingState + AddingState --> SelectedState + end end - subgraph States["InteractiveState"] - NormalState["Normal State\n• Default state\n• Select tools\n• Start adding tools"] - SelectedState["Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation"] - AddingState["Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview"] - - NormalState <--> SelectedState - NormalState --> AddingState - AddingState --> SelectedState - end + DesktopBehaviour["Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning"] + MobileBehaviour["Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets"] + + DesktopBehaviour --> Behaviour + MobileBehaviour --> Behaviour + BehaviourNote --- States end subgraph DrawingToolCreation["Drawing Tool Creation"] diff --git a/doc/diagrams/interactive_layer_architecture.svg b/doc/diagrams/interactive_layer_architecture.svg index 936c4dbf3..f9eb00804 100644 --- a/doc/diagrams/interactive_layer_architecture.svg +++ b/doc/diagrams/interactive_layer_architecture.svg @@ -1 +1 @@ -

Drawing Tool Creation

Drawing Tool States

InteractableDrawing

DrawingAddingPreview

Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning

Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition

InteractiveLayerBase

InteractiveState

Normal State\n• Default state\n• Select tools\n• Start adding tools

Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation

Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview

InteractiveLayerBehaviour

Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning

Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets

USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)

 \ No newline at end of file +

Drawing Tool Creation

Drawing Tool States

InteractableDrawing

DrawingAddingPreview

Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning

Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition

InteractiveLayerBase

Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning

InteractiveLayerBehaviour (Abstract)

InteractiveState

Normal State\n• Default state\n• Select tools\n• Start adding tools

Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation

Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview

Controls & customizes\nstate transitions

Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets

USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)

 \ No newline at end of file From bcdb25d3fe504ee6f80e6dcf123e1c7232fa44e0 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 15 May 2025 12:03:18 +0800 Subject: [PATCH 175/311] update drawing tools architecture diagram --- doc/diagrams/interactive_layer_architecture.mmd | 9 ++------- doc/diagrams/interactive_layer_architecture.svg | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/doc/diagrams/interactive_layer_architecture.mmd b/doc/diagrams/interactive_layer_architecture.mmd index ea1100c00..d72ff079a 100644 --- a/doc/diagrams/interactive_layer_architecture.mmd +++ b/doc/diagrams/interactive_layer_architecture.mmd @@ -33,14 +33,9 @@ flowchart TD end InteractableDrawing["InteractableDrawing"] - - subgraph ToolStates["Drawing Tool States"] - States["See the DrawingToolState section for details on the\ndifferent states a drawing tool can be in (idle, selected,\nhovered, adding, dragging, animating)"] - end - - InteractableDrawing --- ToolStates end + UserInteractions --> InteractiveLayerBase - InteractiveLayerBase --> DrawingToolCreation + AddingState --> DrawingToolCreation Preview --> InteractableDrawing diff --git a/doc/diagrams/interactive_layer_architecture.svg b/doc/diagrams/interactive_layer_architecture.svg index f9eb00804..f8c90750f 100644 --- a/doc/diagrams/interactive_layer_architecture.svg +++ b/doc/diagrams/interactive_layer_architecture.svg @@ -1 +1 @@ -

Drawing Tool Creation

Drawing Tool States

InteractableDrawing

DrawingAddingPreview

Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning

Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition

InteractiveLayerBase

Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning

InteractiveLayerBehaviour (Abstract)

InteractiveState

Normal State\n• Default state\n• Select tools\n• Start adding tools

Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation

Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview

Controls & customizes\nstate transitions

Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets

USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)

 \ No newline at end of file +

InteractiveLayerBase

InteractiveLayerBehaviour (Abstract)

InteractiveState

Drawing Tool Creation

DrawingAddingPreview

Desktop Preview\n• Mouse-based creation\n• Hover feedback\n• Precise positioning

Mobile Preview\n• Touch-based creation\n• Tap sequence handling\n• Gesture recognition

InteractableDrawing

USER INTERACTIONS\n(Taps, Drags, Hovers, Gestures, etc.)

Controls & customizes\nstate transitions

Normal State\n• Default state\n• Select tools\n• Start adding tools

Selected State\n• Tool is selected\n• Show control points\n• Enable manipulation

Adding State\n• Creating new tool\n• Capture coordinates\n• Show drawing preview

Desktop Behaviour\n• Mouse interactions\n• Hover support\n• Precise positioning

Mobile Behaviour\n• Touch interactions\n• Gesture recognition\n• Larger touch targets

 \ No newline at end of file From a8bca70ae8b07e9055a8fb8379c6e8dd073ba120 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 15 May 2025 13:42:31 +0800 Subject: [PATCH 176/311] use the interactive behaviour provided from outside --- lib/src/deriv_chart/deriv_chart.dart | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index ba9579f0f..7cad65d9b 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -201,14 +201,17 @@ class _DerivChartState extends State { final DrawingTools _drawingTools = DrawingTools(); - final InteractiveLayerBehaviour _interactiveLayerBehaviour = kIsWeb - ? InteractiveLayerDesktopBehaviour() - : InteractiveLayerMobileBehaviour(); + late final InteractiveLayerBehaviour _interactiveLayerBehaviour; @override void initState() { super.initState(); + _interactiveLayerBehaviour = widget.interactiveLayerBehaviour ?? + (kIsWeb + ? InteractiveLayerDesktopBehaviour() + : InteractiveLayerMobileBehaviour()); + _initRepos(); } From a1190c8f54bb9007870199879ae3180dbe24424e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 11:32:37 +0800 Subject: [PATCH 177/311] check if behaviour is initialized --- .../interactive_layer_behaviour.dart | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 7816be6b0..d7d3e82bc 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -29,11 +29,24 @@ import '../interactive_layer_states/interactive_state.dart'; abstract class InteractiveLayerBehaviour { late InteractiveState _interactiveState; + bool _initialized = false; + + /// The interactive layer that this manager is managing. + late final InteractiveLayerBase interactiveLayer; + + /// The callback that is called when the interactive layer needs to be + late final VoidCallback onUpdate; + /// Initializes the [InteractiveLayerBehaviour]. void init({ required InteractiveLayerBase interactiveLayer, required VoidCallback onUpdate, }) { + if (_initialized) { + return; + } + + _initialized = true; this.interactiveLayer = interactiveLayer; this.onUpdate = onUpdate; _interactiveState = InteractiveNormalState(interactiveLayerBehaviour: this); @@ -73,12 +86,6 @@ abstract class InteractiveLayerBehaviour { ); } - /// The interactive layer that this manager is managing. - late final InteractiveLayerBase interactiveLayer; - - /// The callback that is called when the interactive layer needs to be - late final VoidCallback onUpdate; - /// The drawings of the interactive layer. Set getToolState(DrawingV2 drawing) => _interactiveState.getToolState(drawing); From a6ddff78dd0eda18cb1767cdf08dce10417e20f6 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 11:37:24 +0800 Subject: [PATCH 178/311] chore: rename drawing tools state from idle to normal --- .../deriv_chart/interactive_layer/enums/drawing_tool_state.dart | 2 +- .../interactive_layer_states/interactive_adding_tool_state.dart | 2 +- .../interactive_layer_states/interactive_hover_state.dart | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart b/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart index 738c18c8c..38adab05d 100644 --- a/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart @@ -6,7 +6,7 @@ enum DrawingToolState { /// Default state when the drawing tool is displayed on the chart /// but not being interacted with. - idle, + normal, /// The drawing tool is currently selected by the user. Selected tools /// typically show additional visual cues like handles or a glowy effect diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index c0896f52f..e9a6e7836 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -69,7 +69,7 @@ class InteractiveAddingToolState extends InteractiveState DrawingToolState.adding, if (_isAddingToolBeingDragged) DrawingToolState.dragging } - : {DrawingToolState.idle}; + : {DrawingToolState.normal}; return states; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart index 79b653e16..dc4b9b440 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_hover_state.dart @@ -17,7 +17,7 @@ mixin InteractiveHoverState on InteractiveState { Set getToolState(DrawingV2 drawing) => drawing == _hoveredTool ? {DrawingToolState.hovered} - : {DrawingToolState.idle}; + : {DrawingToolState.normal}; @override void onHover(PointerHoverEvent event) { From 29c56be4f63b1381d3c42d7b624047974ff4173e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 11:38:24 +0800 Subject: [PATCH 179/311] update docs --- doc/interactive_layer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index 780164bc8..bbf510e42 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -23,7 +23,7 @@ The Interactive Layer implements a state pattern to manage different interaction This is the default state when no drawing tools are selected or being added. In this state: - The user can tap on existing drawing tools to select them - The user can initiate adding a new drawing tool -- All drawing tools are in the `DrawingToolState.idle` state +- All drawing tools are in the `DrawingToolState.normal` state - Includes hover functionality through the `InteractiveHoverState` mixin ### InteractiveSelectedToolState @@ -114,7 +114,7 @@ Each drawing tool that implements `DrawingV2` has its own state, represented by enum DrawingToolState { /// Default state when the drawing tool is displayed on the chart /// but not being interacted with. - idle, + normal, /// The drawing tool is currently selected by the user. Selected tools /// typically show additional visual cues like handles or a glowy effect @@ -148,7 +148,7 @@ The state of a drawing tool affects how it's rendered on the chart and how it re ### Summary -`DrawingV2` serves as the foundation for all drawable elements in the Interactive Layer, defining four essential responsibilities: painting visual representations on the canvas, performing precise hit testing for user interactions, calculating accurate bounding areas, and handling user interaction gestures. The `DrawingToolState` enum works in conjunction with `DrawingV2` to define the possible states a drawing can be in (idle, selected, hovered, adding, dragging, or animating), which affects both its visual appearance and interaction behavior. This design creates a flexible system where drawings can adapt their appearance and behavior based on their current state while maintaining a consistent interface for the Interactive Layer to work with. +`DrawingV2` serves as the foundation for all drawable elements in the Interactive Layer, defining four essential responsibilities: painting visual representations on the canvas, performing precise hit testing for user interactions, calculating accurate bounding areas, and handling user interaction gestures. The `DrawingToolState` enum works in conjunction with `DrawingV2` to define the possible states a drawing can be in (normal, selected, hovered, adding, dragging, or animating), which affects both its visual appearance and interaction behavior. This design creates a flexible system where drawings can adapt their appearance and behavior based on their current state while maintaining a consistent interface for the Interactive Layer to work with. ## InteractiveLayerBase From 863750af30f202ba116cbe30000b9a81f7d05d64 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 13:25:30 +0800 Subject: [PATCH 180/311] chore: update docs --- .../interactive_layer/interactive_layer_base.dart | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 876140503..425469d6b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -17,11 +17,8 @@ abstract class InteractiveLayerBase { /// change. for example from [InteractiveNormalState] to /// [InteractiveSelectedToolState] can be forward /// and from [InteractiveSelectedToolState] to [InteractiveNormalState] can be - /// backward. so the [InteractiveLayerBase] can animate the transition accordingly. - /// - /// The [waitForAnimation] defines if interactive layer should wait for the - /// animation to finish before changing to the new state or should change - /// to the new state right away. + /// backward. so the [InteractiveLayerBase] can animate the transition + /// accordingly. Future animateStateChange(StateChangeAnimationDirection direction); /// The drawings of the interactive layer. From a5e323e3ab219dd7a235432b798f9b5c1c9108fa Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 13:27:59 +0800 Subject: [PATCH 181/311] update doc --- doc/interactive_layer.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/doc/interactive_layer.md b/doc/interactive_layer.md index bbf510e42..b37ee0d34 100644 --- a/doc/interactive_layer.md +++ b/doc/interactive_layer.md @@ -146,10 +146,6 @@ enum DrawingToolState { The state of a drawing tool affects how it's rendered on the chart and how it responds to user interactions. All implementations of `DrawingV2` must manage their state and respond appropriately to state changes as part of their responsibility to handle user interaction gestures. -### Summary - -`DrawingV2` serves as the foundation for all drawable elements in the Interactive Layer, defining four essential responsibilities: painting visual representations on the canvas, performing precise hit testing for user interactions, calculating accurate bounding areas, and handling user interaction gestures. The `DrawingToolState` enum works in conjunction with `DrawingV2` to define the possible states a drawing can be in (normal, selected, hovered, adding, dragging, or animating), which affects both its visual appearance and interaction behavior. This design creates a flexible system where drawings can adapt their appearance and behavior based on their current state while maintaining a consistent interface for the Interactive Layer to work with. - ## InteractiveLayerBase The `InteractiveLayerBase` is an abstract class that defines the interface for the UI component of the Interactive Layer. It serves as the visual representation of the Interactive Layer that is shown to the user and is responsible for: From 513f02f29d683823a34ec6706a97847fe1458492 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 13:59:57 +0800 Subject: [PATCH 182/311] chore: rename methods in InteractiveLayerBase --- lib/src/deriv_chart/interactive_layer/interactive_layer.dart | 4 ++-- .../deriv_chart/interactive_layer/interactive_layer_base.dart | 4 ++-- .../interactive_adding_tool_state.dart | 2 +- .../interactive_selected_tool_state.dart | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 920410cf0..4289f174c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -433,12 +433,12 @@ class _InteractiveLayerGestureHandlerState void clearAddingDrawing() => widget.onClearAddingDrawingTool.call(); @override - DrawingToolConfig onAddDrawing( + DrawingToolConfig addDrawing( InteractableDrawing drawing) => widget.onAddDrawing.call(drawing); @override - void onSaveDrawing(InteractableDrawing drawing) => + void saveDrawing(InteractableDrawing drawing) => widget.onSaveDrawingChange?.call(drawing); @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 425469d6b..563f699cf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -47,10 +47,10 @@ abstract class InteractiveLayerBase { void clearAddingDrawing(); /// Adds the [drawing] to the interactive layer. - DrawingToolConfig onAddDrawing( + DrawingToolConfig addDrawing( InteractableDrawing drawing); /// Save the drawings with the latest changes (positions or anything) to the /// repository. - void onSaveDrawing(InteractableDrawing drawing); + void saveDrawing(InteractableDrawing drawing); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index e9a6e7836..7a1807122 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -137,7 +137,7 @@ class InteractiveAddingToolState extends InteractiveState interactiveLayer.clearAddingDrawing(); final DrawingToolConfig addedConfig = - interactiveLayer.onAddDrawing(_drawingPreview!.interactableDrawing); + interactiveLayer.addDrawing(_drawingPreview!.interactableDrawing); for (final drawing in interactiveLayer.drawings) { if (drawing.config.configId == addedConfig.configId) { diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index b0290492e..d8c723bd5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -66,7 +66,7 @@ class InteractiveSelectedToolState extends InteractiveState void onPanEnd(DragEndDetails details) { selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); _draggingStartedOnTool = false; - interactiveLayer.onSaveDrawing(selected); + interactiveLayer.saveDrawing(selected); } @override @@ -103,7 +103,7 @@ class InteractiveSelectedToolState extends InteractiveState quoteToY, ); - interactiveLayer.onSaveDrawing(selected); + interactiveLayer.saveDrawing(selected); } } From 18dd234826dfaebe648fdc4d0041806b0b7c9374 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 14:47:06 +0800 Subject: [PATCH 183/311] feat: animation effect when dragging trend line in mobile --- lib/src/deriv_chart/chart/main_chart.dart | 8 ++++---- .../trend_line/trend_line_adding_preview_mobile.dart | 4 ++-- .../interactive_layer_mobile_behaviour.dart | 2 +- .../interactive_adding_tool_state.dart | 10 ++++++++++ 4 files changed, 17 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index d32f36195..8b331e1ac 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -385,10 +385,10 @@ class _ChartImplementationState extends BasicChartState { if (widget.drawingTools != null) _buildInteractiveLayer(context, xAxis), // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer - if (kIsWeb) _buildCrosshairAreaWeb(), - if (!kIsWeb && - !(widget.drawingTools?.isDrawingMoving ?? false)) - _buildCrosshairArea(), + // if (kIsWeb) _buildCrosshairAreaWeb(), + // if (!kIsWeb && + // !(widget.drawingTools?.isDrawingMoving ?? false)) + // _buildCrosshairArea(), if (widget.showScrollToLastTickButton && _isScrollToLastTickAvailable) Positioned( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 7f69c9c7f..4966e9817 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -89,7 +89,7 @@ class TrendLineAddingPreviewMobile canvas, paintStyle, lineStyle, - radius: drawingState.contains(DrawingToolState.dragging) ? 8 : 5, + radius: 5 + animationInfo.stateChangePercent * 3, ); drawPointAlignmentGuides(canvas, size, Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote))); @@ -103,7 +103,7 @@ class TrendLineAddingPreviewMobile canvas, paintStyle, lineStyle, - radius: drawingState.contains(DrawingToolState.dragging) ? 8 : 5, + radius: 5 + animationInfo.stateChangePercent * 3, ); final startOffset = diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart index d85be2189..f434ddd7e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart @@ -17,7 +17,7 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { updateStateTo( newState, - StateChangeAnimationDirection.forward, + StateChangeAnimationDirection.backward, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 7a1807122..387e46adc 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -80,6 +80,11 @@ class InteractiveAddingToolState extends InteractiveState _isAddingToolBeingDragged = false; } + interactiveLayerBehaviour.updateStateTo( + this, + StateChangeAnimationDirection.backward, + ); + if (_drawingPreview?.hitTest(details.localPosition, epochToX, quoteToY) ?? false) { _drawingPreview! @@ -91,6 +96,11 @@ class InteractiveAddingToolState extends InteractiveState void onPanStart(DragStartDetails details) { if (_drawingPreview?.hitTest(details.localPosition, epochToX, quoteToY) ?? false) { + interactiveLayerBehaviour.updateStateTo( + this, + StateChangeAnimationDirection.forward, + ); + _isAddingToolBeingDragged = true; _drawingPreview!.onDragStart( details, From 55a7470da0d720139a2c95ca8325075fc18e13a2 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 14:51:54 +0800 Subject: [PATCH 184/311] chore: add a comment --- .../interactive_adding_tool_state.dart | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 387e46adc..8de58ca6c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -80,6 +80,8 @@ class InteractiveAddingToolState extends InteractiveState _isAddingToolBeingDragged = false; } + // To trigger the animation of the interactive layer, so the adding preview + // can perform its revers dragging effect animation. interactiveLayerBehaviour.updateStateTo( this, StateChangeAnimationDirection.backward, @@ -96,6 +98,8 @@ class InteractiveAddingToolState extends InteractiveState void onPanStart(DragStartDetails details) { if (_drawingPreview?.hitTest(details.localPosition, epochToX, quoteToY) ?? false) { + // To trigger the animation of the interactive layer, so the adding + // preview can perform its forward dragging effect animation. interactiveLayerBehaviour.updateStateTo( this, StateChangeAnimationDirection.forward, From c21813b0a654286d5fc8cd87253b21f9bf522229 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 15:45:37 +0800 Subject: [PATCH 185/311] feat: trend line second point start position from center --- .../trend_line_adding_preview_mobile.dart | 26 ++++++++++++++----- .../interactive_layer_base.dart | 3 +-- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 4966e9817..52aeeca66 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -24,18 +24,25 @@ class TrendLineAddingPreviewMobile }) { if (interactableDrawing.startPoint == null) { final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; - final Size? layerSize = interactiveLayer.layerSize; - - final double centerX = layerSize != null ? layerSize.width / 2 : 0; - final double centerY = layerSize != null ? layerSize.height / 2 : 0; + final Offset centerOffset = _getCenterOfScreen(); interactableDrawing.startPoint = EdgePoint( - epoch: interactiveLayer.epochFromX(centerX), - quote: interactiveLayer.quoteFromY(centerY), + epoch: interactiveLayer.epochFromX(centerOffset.dx), + quote: interactiveLayer.quoteFromY(centerOffset.dy), ); } } + Offset _getCenterOfScreen() { + final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; + final Size? layerSize = interactiveLayer.layerSize; + + final double centerX = layerSize != null ? layerSize.width / 2 : 0; + final double centerY = layerSize != null ? layerSize.height / 2 : 0; + + return Offset(centerX, centerY); + } + @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { final EdgePoint? startPoint = interactableDrawing.startPoint; @@ -141,7 +148,12 @@ class TrendLineAddingPreviewMobile quote: quoteFromY(details.localPosition.dy), ); } else if (endPoint == null) { - interactableDrawing.endPoint = startPoint.copyWith(); + final Offset centerOffset = _getCenterOfScreen(); + + interactableDrawing.endPoint = EdgePoint( + epoch: epochFromX(centerOffset.dx), + quote: quoteFromY(centerOffset.dy), + ); } else { onDone(); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 563f699cf..0f191d778 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -47,8 +47,7 @@ abstract class InteractiveLayerBase { void clearAddingDrawing(); /// Adds the [drawing] to the interactive layer. - DrawingToolConfig addDrawing( - InteractableDrawing drawing); + DrawingToolConfig addDrawing(InteractableDrawing drawing); /// Save the drawings with the latest changes (positions or anything) to the /// repository. From 18a4c365183e80051c4d924d881a4913f03566ff Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 20 May 2025 15:46:29 +0800 Subject: [PATCH 186/311] update a doc --- .../interactive_layer_behaviour.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index d7d3e82bc..982671558 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -34,7 +34,7 @@ abstract class InteractiveLayerBehaviour { /// The interactive layer that this manager is managing. late final InteractiveLayerBase interactiveLayer; - /// The callback that is called when the interactive layer needs to be + /// The callback that is called when the interactive layer needs to be updated. late final VoidCallback onUpdate; /// Initializes the [InteractiveLayerBehaviour]. From 790aa07951dd51513113bdfd8440475a99bbaeac Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 21 May 2025 14:03:02 +0800 Subject: [PATCH 187/311] animate second point in trend line after first when it spawned --- .../helpers/paint_helpers.dart | 19 +++++++- .../trend_line_adding_preview_mobile.dart | 44 ++++++++++++++++--- .../interactive_layer/interactive_layer.dart | 4 +- .../interactive_layer_behaviour.dart | 3 ++ 4 files changed, 60 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 8a3d5c013..54b1399da 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -64,7 +64,7 @@ Path dashPath( return dest; } -/// Draws a point for an anchor point of a drawing tool. +/// Draws a point for a given [EdgePoint]. void drawPoint( EdgePoint point, EpochToX epochToX, @@ -81,6 +81,23 @@ void drawPoint( ); } +/// Draws a point for a given [Offset]. +void drawPointOffset( + Offset point, + EpochToX epochToX, + QuoteToY quoteToY, + Canvas canvas, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, { + double radius = 5, +}) { + canvas.drawCircle( + point, + radius, + paintStyle.glowyCirclePaintStyle(lineStyle.color), + ); +} + /// Draws a point for an anchor point of a drawing tool with a glowy effect. void drawPointsFocusedCircle( DrawingPaintStyle paintStyle, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 52aeeca66..31c149df3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -3,6 +3,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/interactive_layer/enums/drawing_tool_state.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/state_change_direction.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; @@ -33,6 +34,11 @@ class TrendLineAddingPreviewMobile } } + /// If `true` it indicates that the position of the first point is confirmed + /// by the user and the second point should be spawned and animated to the + /// center of the screen. Once the animation is done, it will become `false`. + bool _animatingSecondPoint = false; + Offset _getCenterOfScreen() { final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; final Size? layerSize = interactiveLayer.layerSize; @@ -103,8 +109,26 @@ class TrendLineAddingPreviewMobile } else if (startPoint != null && endPoint != null) { // End point is also spawned at the chart, user can move it, we should // show alignment cross-hair on end point. - drawPoint( - endPoint, + + final startOffset = + Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); + final targetEndOffset = + Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); + + late final Offset endOffset; + + if (_animatingSecondPoint) { + endOffset = Offset.lerp( + startOffset, + targetEndOffset, + animationInfo.stateChangePercent, + )!; + } else { + endOffset = targetEndOffset; + } + + drawPointOffset( + endOffset, epochToX, quoteToY, canvas, @@ -113,11 +137,6 @@ class TrendLineAddingPreviewMobile radius: 5 + animationInfo.stateChangePercent * 3, ); - final startOffset = - Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); - final endOffset = - Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); - drawPointAlignmentGuides(canvas, size, endOffset); // Use glowy paint style if selected, otherwise use normal paint style @@ -148,6 +167,17 @@ class TrendLineAddingPreviewMobile quote: quoteFromY(details.localPosition.dy), ); } else if (endPoint == null) { + _animatingSecondPoint = true; + interactiveLayerBehaviour + .updateStateTo( + interactiveLayerBehaviour.currentState, + StateChangeAnimationDirection.forward, + waitForAnimation: true, + ) + .then( + (_) => _animatingSecondPoint = false, + ); + final Offset centerOffset = _getCenterOfScreen(); interactableDrawing.endPoint = EdgePoint( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 4289f174c..b71dd825f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -238,7 +238,7 @@ class _InteractiveLayerGestureHandlerState with SingleTickerProviderStateMixin implements InteractiveLayerBase { late AnimationController _stateChangeController; - static const Curve _stateChangeCurve = Curves.easeInOut; + static const Curve _stateChangeCurve = Curves.easeOut; final InteractionNotifier _interactionNotifier = InteractionNotifier(); @override @@ -267,7 +267,7 @@ class _InteractiveLayerGestureHandlerState _stateChangeController = AnimationController( vsync: this, - duration: const Duration(milliseconds: 300), + duration: const Duration(milliseconds: 240), ); // register the callback diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 982671558..52b26bb0c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -29,6 +29,9 @@ import '../interactive_layer_states/interactive_state.dart'; abstract class InteractiveLayerBehaviour { late InteractiveState _interactiveState; + /// Current state of the interactive layer. + InteractiveState get currentState => _interactiveState; + bool _initialized = false; /// The interactive layer that this manager is managing. From 59c7ccf6db9131bfdc4889e68519a704af55e029 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 21 May 2025 14:42:55 +0800 Subject: [PATCH 188/311] refactor: don't check hitTest in adding tool state pan update --- .../interactive_adding_tool_state.dart | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 8de58ca6c..474a9ea46 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -120,16 +120,14 @@ class InteractiveAddingToolState extends InteractiveState @override void onPanUpdate(DragUpdateDetails details) { - if (_drawingPreview != null) { - if (_drawingPreview!.hitTest(details.localPosition, epochToX, quoteToY)) { - _drawingPreview!.onDragUpdate( - details, - epochFromX, - quoteFromY, - epochToX, - quoteToY, - ); - } + if (_isAddingToolBeingDragged) { + _drawingPreview?.onDragUpdate( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); } } From 157f591a10af8645eb086010a669faac7d12ac96 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 00:46:54 +0800 Subject: [PATCH 189/311] have a map for drawings passed to layer --- lib/src/deriv_chart/chart/main_chart.dart | 1 + .../trend_line_interactable_drawing.dart | 62 ++++--------------- .../interactive_layer/interactive_layer.dart | 31 +++++++--- .../interactive_adding_tool_state.dart | 28 +++------ .../interactive_selected_tool_state.dart | 3 +- 5 files changed, 49 insertions(+), 76 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 8b331e1ac..c288bcac1 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -191,6 +191,7 @@ class _ChartImplementationState extends BasicChartState { void initState() { super.initState(); + // TODO(Ramin): mention in the document to customize or go with default. _interactiveLayerBehaviour = widget.interactiveLayerBehaviour ?? InteractiveLayerDesktopBehaviour(); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index ad98ce4b7..2cdd45116 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -30,6 +30,7 @@ class TrendLineInteractableDrawing required this.endPoint, }) : super(config: config); + // TODO(Ramin): make it non-nullable. /// Start point of the line. EdgePoint? startPoint; @@ -50,31 +51,24 @@ class TrendLineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, ) { - if (startPoint != null && endPoint == null) { - final Offset startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), - ); - - // Check if the drag is starting on the start point - if ((details.localPosition - startOffset).distance <= hitTestMargin) { - _isDraggingStartPoint = true; - return; - } - } - if (startPoint == null || endPoint == null) { return; } - // Reset the dragging flag - _isDraggingStartPoint = null; - - // Convert start and end points from epoch/quote to screen coordinates final Offset startOffset = Offset( epochToX(startPoint!.epoch), quoteToY(startPoint!.quote), ); + + // Check if the drag is starting on the start point + if ((details.localPosition - startOffset).distance <= hitTestMargin) { + _isDraggingStartPoint = true; + return; + } + + // Reset the dragging flag + _isDraggingStartPoint = null; + final Offset endOffset = Offset( epochToX(endPoint!.epoch), quoteToY(endPoint!.quote), @@ -194,7 +188,8 @@ class TrendLineInteractableDrawing canvas.drawLine(startOffset, endOffset, paint); // Draw endpoints with glowy effect if selected - if (drawingState.contains(DrawingToolState.selected) || + if ((drawingState.contains(DrawingToolState.selected) && + !drawingState.contains(DrawingToolState.hovered)) || drawingState.contains(DrawingToolState.dragging)) { drawPointsFocusedCircle( paintStyle, @@ -214,17 +209,6 @@ class TrendLineInteractableDrawing if (drawingState.contains(DrawingToolState.dragging)) { _drawAlignmentGuides(canvas, size, startOffset, endOffset, paintStyle); } - } else if (drawingState.contains(DrawingToolState.adding)) { - if (startPoint != null) { - drawPoint( - startPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - drawPointAlignmentGuides(canvas, size, - Offset(epochToX(startPoint!.epoch), quoteToY(startPoint!.quote))); - } - - if (endPoint != null) { - drawPoint(endPoint!, epochToX, quoteToY, canvas, paintStyle, lineStyle); - } } } @@ -244,26 +228,6 @@ class TrendLineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, ) { - if (startPoint != null && endPoint == null) { - // If we're dragging the start point, we need to update its position - final Offset startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), - ); - - // Apply the delta to get the new screen position - final Offset newOffset = startOffset + details.delta; - - // Convert back to epoch and quote coordinates - final int newEpoch = epochFromX(newOffset.dx); - final double newQuote = quoteFromY(newOffset.dy); - - // Update the start point - startPoint = EdgePoint( - epoch: newEpoch, - quote: newQuote, - ); - } if (startPoint == null || endPoint == null) { return; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index b71dd825f..54f5ee557 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/multiple_animated_builder.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; @@ -77,7 +78,8 @@ class InteractiveLayer extends StatefulWidget { } class _InteractiveLayerState extends State { - final List _interactableDrawings = []; + final Map _interactableDrawings = + {}; /// Timers for debouncing repository updates /// @@ -94,16 +96,31 @@ class _InteractiveLayerState extends State { void initState() { super.initState(); - widget.drawingToolsRepo.addListener(_setDrawingsFromConfigs); + widget.drawingToolsRepo.addListener(syncDrawingsWithConfigs); } - void _setDrawingsFromConfigs() { - _interactableDrawings.clear(); + void syncDrawingsWithConfigs() { + final configListIds = + widget.drawingToolsRepo.items.map((c) => c.configId).toSet(); for (final config in widget.drawingToolsRepo.items) { - _interactableDrawings.add(config.getInteractableDrawing()); + if (!_interactableDrawings.containsKey(config.configId)) { + // Add new drawing if it doesn't exist + final drawing = config.getInteractableDrawing(); + _interactableDrawings[config.configId!] = drawing; + widget.interactiveLayerBehaviour.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + ), + StateChangeAnimationDirection.forward, + ); + } } + // Remove drawings that are not in the config list + _interactableDrawings.removeWhere((id, _) => !configListIds.contains(id)); + setState(() {}); } @@ -162,14 +179,14 @@ class _InteractiveLayerState extends State { } _debounceTimers.clear(); - widget.drawingToolsRepo.removeListener(_setDrawingsFromConfigs); + widget.drawingToolsRepo.removeListener(syncDrawingsWithConfigs); super.dispose(); } @override Widget build(BuildContext context) { return _InteractiveLayerGestureHandler( - drawings: _interactableDrawings, + drawings: _interactableDrawings.values.toList(), epochFromX: widget.epochFromCanvasX, quoteFromY: widget.quoteFromCanvasY, epochToX: widget.epochToCanvasX, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 474a9ea46..47c0051fd 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -7,7 +7,6 @@ import '../interactable_drawings/drawing_v2.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; -import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is being added. @@ -146,23 +145,16 @@ class InteractiveAddingToolState extends InteractiveState void onTap(TapUpDetails details) { _drawingPreview! .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { - interactiveLayer.clearAddingDrawing(); - - final DrawingToolConfig addedConfig = - interactiveLayer.addDrawing(_drawingPreview!.interactableDrawing); - - for (final drawing in interactiveLayer.drawings) { - if (drawing.config.configId == addedConfig.configId) { - interactiveLayerBehaviour.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayerBehaviour: interactiveLayerBehaviour, - ), - StateChangeAnimationDirection.forward, - ); - break; - } - } + interactiveLayerBehaviour.updateStateTo( + InteractiveNormalState( + interactiveLayerBehaviour: interactiveLayerBehaviour, + ), + StateChangeAnimationDirection.forward, + ); + + interactiveLayer + ..clearAddingDrawing() + ..addDrawing(_drawingPreview!.interactableDrawing); }); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index d8c723bd5..dec409b49 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:flutter/widgets.dart'; @@ -102,8 +103,6 @@ class InteractiveSelectedToolState extends InteractiveState epochToX, quoteToY, ); - - interactiveLayer.saveDrawing(selected); } } From e63db3a6c0e0df2b8b1b79197cc055fbb31e369c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 11:19:30 +0800 Subject: [PATCH 190/311] minor change in onPanEnd adding state --- .../interactive_adding_tool_state.dart | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 47c0051fd..b5251b6cf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -76,6 +76,9 @@ class InteractiveAddingToolState extends InteractiveState @override void onPanEnd(DragEndDetails details) { if (_isAddingToolBeingDragged) { + _drawingPreview?.onDragEnd( + details, epochFromX, quoteFromY, epochToX, quoteToY); + _isAddingToolBeingDragged = false; } @@ -85,12 +88,6 @@ class InteractiveAddingToolState extends InteractiveState this, StateChangeAnimationDirection.backward, ); - - if (_drawingPreview?.hitTest(details.localPosition, epochToX, quoteToY) ?? - false) { - _drawingPreview! - .onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); - } } @override From 660a581ee86bb0477f9fbfc4b7f50755b38344df Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 11:36:18 +0800 Subject: [PATCH 191/311] add flag to switch between new and old impl of drawing tools --- lib/src/deriv_chart/chart/chart.dart | 4 ++++ .../deriv_chart/chart/chart_state_mobile.dart | 1 + .../deriv_chart/chart/chart_state_web.dart | 1 + lib/src/deriv_chart/chart/main_chart.dart | 21 ++++++++++++------- lib/src/deriv_chart/deriv_chart.dart | 17 ++++++++++----- 5 files changed, 31 insertions(+), 13 deletions(-) diff --git a/lib/src/deriv_chart/chart/chart.dart b/lib/src/deriv_chart/chart/chart.dart index 62bbc55c6..2c25811dc 100644 --- a/lib/src/deriv_chart/chart/chart.dart +++ b/lib/src/deriv_chart/chart/chart.dart @@ -76,9 +76,13 @@ class Chart extends StatefulWidget { this.showDataFitButton, this.showScrollToLastTickButton, this.loadingAnimationColor, + this.useDrawingToolsV2 = false, Key? key, }) : super(key: key); + /// Whether to use new drawing tools or not. + final bool useDrawingToolsV2; + /// Chart's main data series. final DataSeries mainSeries; diff --git a/lib/src/deriv_chart/chart/chart_state_mobile.dart b/lib/src/deriv_chart/chart/chart_state_mobile.dart index 76b49bd49..d18b512de 100644 --- a/lib/src/deriv_chart/chart/chart_state_mobile.dart +++ b/lib/src/deriv_chart/chart/chart_state_mobile.dart @@ -142,6 +142,7 @@ class _ChartStateMobile extends _ChartState { showCurrentTickBlinkAnimation: widget.showCurrentTickBlinkAnimation ?? true, interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + useDrawingToolsV2: widget.useDrawingToolsV2, ), Align( alignment: Alignment.topLeft, diff --git a/lib/src/deriv_chart/chart/chart_state_web.dart b/lib/src/deriv_chart/chart/chart_state_web.dart index 7784e5e3d..c8dbdbd9c 100644 --- a/lib/src/deriv_chart/chart/chart_state_web.dart +++ b/lib/src/deriv_chart/chart/chart_state_web.dart @@ -47,6 +47,7 @@ class _ChartStateWeb extends _ChartState { showCurrentTickBlinkAnimation: widget.showCurrentTickBlinkAnimation ?? true, interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + useDrawingToolsV2: widget.useDrawingToolsV2, ), ), if (bottomSeries?.isNotEmpty ?? false) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index c288bcac1..4cecd6c6e 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -66,6 +66,7 @@ class MainChart extends BasicChart { VisibleQuoteAreaChangedCallback? onQuoteAreaChanged, this.interactiveLayerBehaviour, this.showCrosshair = false, + this.useDrawingToolsV2 = false, }) : _mainSeries = mainSeries, chartDataList = [ mainSeries, @@ -81,6 +82,9 @@ class MainChart extends BasicChart { onQuoteAreaChanged: onQuoteAreaChanged, ); + /// Whether to use the new drawing tools v2 or not. + final bool useDrawingToolsV2; + /// The indicator series that are displayed on the main chart. final List? overlaySeries; final DataSeries _mainSeries; @@ -381,15 +385,16 @@ class _ChartImplementationState extends BasicChartState { _buildSeries(widget.overlaySeries!), _buildAnnotations(), if (widget.markerSeries != null) _buildMarkerArea(), - // if (widget.drawingTools != null) - // _buildDrawingToolChart(widget.drawingTools!), + if (widget.drawingTools != null && widget.useDrawingToolsV2) + _buildInteractiveLayer(context, xAxis) + else if (widget.drawingTools != null) + _buildDrawingToolChart(widget.drawingTools!), if (widget.drawingTools != null) - _buildInteractiveLayer(context, xAxis), - // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer - // if (kIsWeb) _buildCrosshairAreaWeb(), - // if (!kIsWeb && - // !(widget.drawingTools?.isDrawingMoving ?? false)) - // _buildCrosshairArea(), + // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer + if (kIsWeb) _buildCrosshairAreaWeb(), + if (!kIsWeb && + !(widget.drawingTools?.isDrawingMoving ?? false)) + _buildCrosshairArea(), if (widget.showScrollToLastTickButton && _isScrollToLastTickAvailable) Positioned( diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 7cad65d9b..01e999a8a 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -66,9 +66,13 @@ class DerivChart extends StatefulWidget { this.showScrollToLastTickButton, this.loadingAnimationColor, this.interactiveLayerBehaviour, + this.useDrawingToolsV2 = false, Key? key, }) : super(key: key); + /// Whether to use the new drawing tools v2 or not. + final bool useDrawingToolsV2; + /// Chart's main data series final DataSeries mainSeries; @@ -284,11 +288,13 @@ class _DerivChartState extends State { void showDrawingToolsDialog() { setState(() { - // _drawingTools - // ..init() - // ..drawingToolsRepo = _drawingToolsRepo; - // Comment above statement and uncomment below line, when using [InteractiveLayer] - _drawingTools.drawingToolsRepo = _drawingToolsRepo; + if (widget.useDrawingToolsV2) { + _drawingTools.drawingToolsRepo = _drawingToolsRepo; + } else { + _drawingTools + ..init() + ..drawingToolsRepo = _drawingToolsRepo; + } }); showDialog( context: context, @@ -379,6 +385,7 @@ class _DerivChartState extends State { loadingAnimationColor: widget.loadingAnimationColor, chartAxisConfig: widget.chartAxisConfig, interactiveLayerBehaviour: _interactiveLayerBehaviour, + useDrawingToolsV2: widget.useDrawingToolsV2, ), if (widget.indicatorsRepo == null) _buildIndicatorsIcon(), if (widget.drawingToolsRepo == null) _buildDrawingToolsIcon(), From e494ae0b5a715b613335656d32ac4abc43c4f8f0 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 12:03:47 +0800 Subject: [PATCH 192/311] chore: update drawing tools doc --- doc/drawing_tools.md | 123 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) diff --git a/doc/drawing_tools.md b/doc/drawing_tools.md index 10a5f9d84..90e813ef3 100644 --- a/doc/drawing_tools.md +++ b/doc/drawing_tools.md @@ -1,5 +1,128 @@ # Drawing Tools +## Setup Guide + +### Setting Up Drawing Tools + +The Deriv Chart library provides two implementations of drawing tools: + +1. **Legacy Drawing Tools** (Original Implementation) +2. **Interactive Layer Drawing Tools** (New Implementation with V2) + +#### Comparing the Two Implementations + +| Feature | Legacy Drawing Tools | Interactive Layer (V2) | +|---------|---------------------|------------------------| +| Platform Optimization | Generic implementation | Specialized behaviors for desktop and mobile | +| State Management | Basic state | Comprehensive state pattern with clear transitions | +| Visual Feedback | Limited | Enhanced visual cues and animations | +| Customization | Limited | Extensive customization through behaviors | +| Architecture | Widget-based | Component-based with clear separation of concerns | +| Hover Support | Limited | Full hover state support (on desktop) | +| Touch Optimization | Basic | Enhanced touch targets and gestures for mobile | + +#### Required Imports + +For both implementations, you'll need to import the appropriate packages: + +```dart +// For both implementations +import 'package:deriv_chart/deriv_chart.dart'; +``` + +For the V2 implementation, you'll also need to import the interactive layer behaviors: + +```dart +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +``` + +#### Legacy Drawing Tools Setup + +To use the original drawing tools implementation: + +```dart +import 'package:deriv_chart/deriv_chart.dart'; +import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; + +// In your widget build method +Chart( + mainSeries: yourDataSeries, + granularity: yourGranularity, + drawingTools: DrawingTools(), // Initialize the drawing tools + useDrawingToolsV2: false, // Set to false to use legacy implementation + // other chart parameters... +) +``` + +#### Interactive Layer Drawing Tools Setup (V2) + +The new implementation provides improved behavior, more control over platform-specific interactions, and better visual hints for users: + +```dart +import 'package:deriv_chart/deriv_chart.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; + +// In your widget build method +Chart( + mainSeries: yourDataSeries, + granularity: yourGranularity, + useDrawingToolsV2: true, // Enable the new drawing tools implementation + interactiveLayerBehaviour: InteractiveLayerDesktopBehaviour(), // For desktop platforms + // other chart parameters... +) +``` + +For mobile applications: + +```dart +import 'package:deriv_chart/deriv_chart.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; + +// In your widget build method +Chart( + mainSeries: yourDataSeries, + granularity: yourGranularity, + useDrawingToolsV2: true, + interactiveLayerBehaviour: InteractiveLayerMobileBehaviour(), // Optimized for touch interactions + // other chart parameters... +) +``` + +If you don't specify an `interactiveLayerBehaviour`, the chart will use `InteractiveLayerDesktopBehaviour` by default. + + +#### Custom Interactive Layer Behavior + +You can create custom implementations of `InteractiveLayerBehaviour` to tailor the drawing tools experience to your specific needs: + +```dart +import 'package:deriv_chart/deriv_chart.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart'; +import 'package:flutter/material.dart'; + +class CustomInteractiveLayerBehaviour extends InteractiveLayerBehaviour { + // Override to customize behavior +} + +// In your widget build method +Chart( + mainSeries: yourDataSeries, + granularity: yourGranularity, + useDrawingToolsV2: true, + interactiveLayerBehaviour: CustomInteractiveLayerBehaviour(), + // other chart parameters... +) +``` + +## Implementation Details + +### Legacy Drawing Tools Implementation + +The following sections describe the implementation details of the legacy drawing tools system. If you're using the new V2 implementation with `useDrawingToolsV2: true`, please refer to the [Interactive Layer documentation](interactive_layer.md) for detailed information about its architecture and components. + The process initiates by opening the drawing tools dialog and selecting a preferred drawing tool. Subsequently, the user can add specific taps on the Deriv chart to start drawing with default configurations. The GestureDetector on the Deriv chart, utilized by the `drawingCreator` captures user input. Within the `onTap` method, every captured input will be added to the list of edgePoints. Simultaneously, the `drawingParts` list is created to store the drawing parts. Both lists are then passed to the `onAddDrawing` callback, which adds the complete drawing to the drawing repository and saves it in shared preferences based on the active Symbol, so the drawing data can be retrieved based on the chart's symbol. From c7f597da5695ca9e034345edacc990e54cbf73c6 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 12:06:22 +0800 Subject: [PATCH 193/311] chore: update drawing tools doc --- doc/drawing_tools.md | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/doc/drawing_tools.md b/doc/drawing_tools.md index 90e813ef3..33e742b33 100644 --- a/doc/drawing_tools.md +++ b/doc/drawing_tools.md @@ -30,21 +30,12 @@ For both implementations, you'll need to import the appropriate packages: import 'package:deriv_chart/deriv_chart.dart'; ``` -For the V2 implementation, you'll also need to import the interactive layer behaviors: - -```dart -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; -``` - #### Legacy Drawing Tools Setup To use the original drawing tools implementation: ```dart import 'package:deriv_chart/deriv_chart.dart'; -import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; // In your widget build method Chart( @@ -62,7 +53,6 @@ The new implementation provides improved behavior, more control over platform-sp ```dart import 'package:deriv_chart/deriv_chart.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; // In your widget build method Chart( @@ -78,7 +68,6 @@ For mobile applications: ```dart import 'package:deriv_chart/deriv_chart.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; // In your widget build method Chart( From b3fef68370f9f67cf5f7e9c8929a756a4a33765e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 13:56:01 +0800 Subject: [PATCH 194/311] add barrel files --- doc/drawing_tools.md | 3 --- lib/deriv_chart.dart | 1 + .../interactive_layer_export.dart | 19 +++++++++++++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart diff --git a/doc/drawing_tools.md b/doc/drawing_tools.md index 33e742b33..24fb1f1fd 100644 --- a/doc/drawing_tools.md +++ b/doc/drawing_tools.md @@ -88,9 +88,6 @@ You can create custom implementations of `InteractiveLayerBehaviour` to tailor t ```dart import 'package:deriv_chart/deriv_chart.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_states/interactive_state.dart'; -import 'package:flutter/material.dart'; class CustomInteractiveLayerBehaviour extends InteractiveLayerBehaviour { // Override to customize behavior diff --git a/lib/deriv_chart.dart b/lib/deriv_chart.dart index 68fbe542d..ec5d8cfd2 100644 --- a/lib/deriv_chart.dart +++ b/lib/deriv_chart.dart @@ -41,6 +41,7 @@ export 'src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_osc export 'src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.dart'; export 'src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.dart'; export 'src/add_ons/repository.dart'; +export 'src/deriv_chart/interactive_layer/interactive_layer_export.dart'; export 'src/deriv_chart/chart/chart.dart'; export 'src/deriv_chart/chart/data_visualization/annotations/barriers/accumulators_barriers/accumulators_active_contract.dart'; export 'src/deriv_chart/chart/data_visualization/annotations/barriers/accumulators_barriers/accumulators_closed_indicator.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart new file mode 100644 index 000000000..b85422ea3 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart @@ -0,0 +1,19 @@ +export 'interactive_layer_behaviours/interactive_layer_behaviour.dart'; +export 'interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +export 'interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +export 'interactive_layer_states/interactive_adding_tool_state.dart'; +export 'interactive_layer_states/interactive_adding_tool_state_mobile.dart'; +export 'interactive_layer_states/interactive_hover_state.dart'; +export 'interactive_layer_states/interactive_normal_state.dart'; +export 'interactive_layer_states/interactive_selected_tool_state.dart'; +export 'interactive_layer_states/interactive_state.dart'; +export 'interactable_drawings/drawing_v2.dart'; +export 'interactable_drawings/drawing_adding_preview.dart'; +export 'interactable_drawings/interactable_drawing.dart'; +export 'interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; +export 'interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart'; +export 'interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart'; +export 'interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart'; +export 'interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart'; +export 'interactable_drawings/trend_line/trend_line_interactable_drawing.dart'; +export 'interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart'; \ No newline at end of file From 2c824bf066ba4bf87e1b825dd51f56845ec8ecf3 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 14:00:51 +0800 Subject: [PATCH 195/311] fix export file formatting --- .../deriv_chart/interactive_layer/interactive_layer_export.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart index b85422ea3..9bfcf2432 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_export.dart @@ -16,4 +16,4 @@ export 'interactable_drawings/horizontal_line/horizontal_line_interactable_drawi export 'interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart'; export 'interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart'; export 'interactable_drawings/trend_line/trend_line_interactable_drawing.dart'; -export 'interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart'; \ No newline at end of file +export 'interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart'; From e1f074ea959966cc6cf5c7b6e6248dde599bf1c1 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 14:02:59 +0800 Subject: [PATCH 196/311] remove unused code --- lib/src/deriv_chart/chart/main_chart.dart | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 4cecd6c6e..ba5c9ff45 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -389,9 +389,7 @@ class _ChartImplementationState extends BasicChartState { _buildInteractiveLayer(context, xAxis) else if (widget.drawingTools != null) _buildDrawingToolChart(widget.drawingTools!), - if (widget.drawingTools != null) - // TODO(Ramin): move and handle cross-hair inside the InteractiveLayer - if (kIsWeb) _buildCrosshairAreaWeb(), + if (kIsWeb) _buildCrosshairAreaWeb(), if (!kIsWeb && !(widget.drawingTools?.isDrawingMoving ?? false)) _buildCrosshairArea(), From 7af71159486f1db8171ee25a06eb8ed9f1d2f9a3 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 14:11:54 +0800 Subject: [PATCH 197/311] update a doc --- doc/drawing_tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/drawing_tools.md b/doc/drawing_tools.md index 24fb1f1fd..79c18f49b 100644 --- a/doc/drawing_tools.md +++ b/doc/drawing_tools.md @@ -79,7 +79,7 @@ Chart( ) ``` -If you don't specify an `interactiveLayerBehaviour`, the chart will use `InteractiveLayerDesktopBehaviour` by default. +If you don't specify an `interactiveLayerBehaviour`, the chart will use `InteractiveLayerDesktopBehaviour` on web and `InteractiveLayerMobileBehaviour` on other platforms. #### Custom Interactive Layer Behavior From 0ccd02e4489d1f1877fa5dcb39facd02ad6055ad Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 16:45:58 +0800 Subject: [PATCH 198/311] use LayoutBuilder instead to determine the layer size' --- .../interactive_layer/interactive_layer.dart | 214 +++++++++--------- 1 file changed, 105 insertions(+), 109 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 54f5ee557..7a028a6f8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -262,21 +262,12 @@ class _InteractiveLayerGestureHandlerState AnimationController? get stateChangeAnimationController => _stateChangeController; - final GlobalKey _layerKey = GlobalKey(); - Size? _size; @override void initState() { super.initState(); - WidgetsFlutterBinding.ensureInitialized().addPostFrameCallback((_) { - setState(() { - _size = - (_layerKey.currentContext?.findRenderObject() as RenderBox?)?.size; - }); - }); - widget.interactiveLayerBehaviour.init( interactiveLayer: this, onUpdate: () => setState(() {}), @@ -320,110 +311,115 @@ class _InteractiveLayerGestureHandlerState @override Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); - return MouseRegion( - onHover: (event) { - widget.interactiveLayerBehaviour.onHover(event); - _interactionNotifier.notify(); - }, - child: GestureDetector( - onTapUp: (details) { - widget.interactiveLayerBehaviour.onTap(details); - _interactionNotifier.notify(); - }, - onPanStart: (details) { - widget.interactiveLayerBehaviour.onPanStart(details); - _interactionNotifier.notify(); - }, - onPanUpdate: (details) { - widget.interactiveLayerBehaviour.onPanUpdate(details); - _interactionNotifier.notify(); - }, - onPanEnd: (details) { - widget.interactiveLayerBehaviour.onPanEnd(details); + return LayoutBuilder(builder: (_, BoxConstraints constraints) { + _size = Size(constraints.maxWidth, constraints.maxHeight); + + return MouseRegion( + onHover: (event) { + widget.interactiveLayerBehaviour.onHover(event); _interactionNotifier.notify(); }, - // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement - // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. - child: RepaintBoundary( - key: _layerKey, - child: MultipleAnimatedBuilder( - animations: [_stateChangeController, _interactionNotifier], - builder: (_, __) { - final double animationValue = - _stateChangeCurve.transform(_stateChangeController.value); - - return Stack( - fit: StackFit.expand, - children: widget.series.input.isEmpty - ? [] - : [ - ...widget.drawings - .map((e) => CustomPaint( - key: ValueKey(e.id), - foregroundPainter: - InteractableDrawingCustomPainter( - drawing: e, - currentDrawingState: widget - .interactiveLayerBehaviour - .getToolState(e), - drawingState: widget - .interactiveLayerBehaviour - .getToolState, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - epochRange: EpochRange( - rightEpoch: xAxis.rightBoundEpoch, - leftEpoch: xAxis.leftBoundEpoch, - ), - quoteRange: widget.quoteRange, - animationInfo: AnimationInfo( - stateChangePercent: animationValue, + child: GestureDetector( + onTapUp: (details) { + widget.interactiveLayerBehaviour.onTap(details); + _interactionNotifier.notify(); + }, + onPanStart: (details) { + widget.interactiveLayerBehaviour.onPanStart(details); + _interactionNotifier.notify(); + }, + onPanUpdate: (details) { + widget.interactiveLayerBehaviour.onPanUpdate(details); + _interactionNotifier.notify(); + }, + onPanEnd: (details) { + widget.interactiveLayerBehaviour.onPanEnd(details); + _interactionNotifier.notify(); + }, + // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement + // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. + child: RepaintBoundary( + child: MultipleAnimatedBuilder( + animations: [_stateChangeController, _interactionNotifier], + builder: (_, __) { + final double animationValue = + _stateChangeCurve.transform(_stateChangeController.value); + + return Stack( + fit: StackFit.expand, + children: widget.series.input.isEmpty + ? [] + : [ + ...widget.drawings + .map((e) => CustomPaint( + key: ValueKey(e.id), + foregroundPainter: + InteractableDrawingCustomPainter( + drawing: e, + currentDrawingState: widget + .interactiveLayerBehaviour + .getToolState(e), + drawingState: widget + .interactiveLayerBehaviour + .getToolState, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + epochRange: EpochRange( + rightEpoch: xAxis.rightBoundEpoch, + leftEpoch: xAxis.leftBoundEpoch, + ), + quoteRange: widget.quoteRange, + animationInfo: AnimationInfo( + stateChangePercent: animationValue, + ), ), - ), - )) - .toList(), - ...widget.interactiveLayerBehaviour.previewDrawings - .map((e) => CustomPaint( - key: ValueKey(e.id), - foregroundPainter: - InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - currentDrawingState: widget - .interactiveLayerBehaviour - .getToolState(e), - drawingState: widget - .interactiveLayerBehaviour - .getToolState, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - epochRange: EpochRange( - rightEpoch: xAxis.rightBoundEpoch, - leftEpoch: xAxis.leftBoundEpoch, - ), - quoteRange: widget.quoteRange, - animationInfo: AnimationInfo( - stateChangePercent: - animationValue) - // onDrawingToolClicked: () => _selectedDrawing = e, - ), - )) - .toList(), - ], - ); - }), + )) + .toList(), + ...widget.interactiveLayerBehaviour.previewDrawings + .map((e) => CustomPaint( + key: ValueKey(e.id), + foregroundPainter: + InteractableDrawingCustomPainter( + drawing: e, + series: widget.series, + currentDrawingState: widget + .interactiveLayerBehaviour + .getToolState(e), + drawingState: widget + .interactiveLayerBehaviour + .getToolState, + theme: + context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + epochRange: EpochRange( + rightEpoch: + xAxis.rightBoundEpoch, + leftEpoch: xAxis.leftBoundEpoch, + ), + quoteRange: widget.quoteRange, + animationInfo: AnimationInfo( + stateChangePercent: + animationValue) + // onDrawingToolClicked: () => _selectedDrawing = e, + ), + )) + .toList(), + ], + ); + }), + ), ), - ), - ); + ); + }); } void onTap(TapUpDetails details) { From 3aab569ecd866c3e0b65f48cbc89cec92c945ee2 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 22 May 2025 22:53:21 +0800 Subject: [PATCH 199/311] new behaviour when adding trend line in mobile --- lib/src/deriv_chart/chart/main_chart.dart | 8 +- .../helpers/paint_helpers.dart | 46 +-- .../trend_line_adding_preview_mobile.dart | 281 ++++++++++-------- .../trend_line_interactable_drawing.dart | 35 +-- 4 files changed, 201 insertions(+), 169 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index ba5c9ff45..1e2c5e3e6 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -389,10 +389,10 @@ class _ChartImplementationState extends BasicChartState { _buildInteractiveLayer(context, xAxis) else if (widget.drawingTools != null) _buildDrawingToolChart(widget.drawingTools!), - if (kIsWeb) _buildCrosshairAreaWeb(), - if (!kIsWeb && - !(widget.drawingTools?.isDrawingMoving ?? false)) - _buildCrosshairArea(), + // if (kIsWeb) _buildCrosshairAreaWeb(), + // if (!kIsWeb && + // !(widget.drawingTools?.isDrawingMoving ?? false)) + // _buildCrosshairArea(), if (widget.showScrollToLastTickButton && _isScrollToLastTickAvailable) Positioned( diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 54b1399da..36d46b9bf 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -99,40 +99,46 @@ void drawPointOffset( } /// Draws a point for an anchor point of a drawing tool with a glowy effect. -void drawPointsFocusedCircle( - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - Canvas canvas, - Offset startOffset, - double outerCircleRadius, - double innerCircleRadius, - Offset endOffset) { +void drawFocusedCircle( + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + Canvas canvas, + Offset offset, + double outerCircleRadius, + double innerCircleRadius, +) { final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); final glowyPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); canvas ..drawCircle( - startOffset, + offset, outerCircleRadius, glowyPaintStyle, ) ..drawCircle( - startOffset, - innerCircleRadius, - normalPaintStyle, - ) - ..drawCircle( - endOffset, - outerCircleRadius, - glowyPaintStyle, - ) - ..drawCircle( - endOffset, + offset, innerCircleRadius, normalPaintStyle, ); } +/// Draws a point for an anchor point of a drawing tool with a glowy effect. +void drawPointsFocusedCircle( + DrawingPaintStyle paintStyle, + LineStyle lineStyle, + Canvas canvas, + Offset startOffset, + double outerCircleRadius, + double innerCircleRadius, + Offset endOffset, +) { + drawFocusedCircle(paintStyle, lineStyle, canvas, startOffset, + outerCircleRadius, innerCircleRadius); + drawFocusedCircle(paintStyle, lineStyle, canvas, endOffset, outerCircleRadius, + innerCircleRadius); +} + /// A circular array for dash patterns class CircularIntervalList { /// Initializes [CircularIntervalList]. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 31c149df3..0f6d7463d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/state_change_direction.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import '../../helpers/paint_helpers.dart'; @@ -25,56 +26,31 @@ class TrendLineAddingPreviewMobile }) { if (interactableDrawing.startPoint == null) { final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; - final Offset centerOffset = _getCenterOfScreen(); - - interactableDrawing.startPoint = EdgePoint( - epoch: interactiveLayer.epochFromX(centerOffset.dx), - quote: interactiveLayer.quoteFromY(centerOffset.dy), - ); + final Size size = interactiveLayer.layerSize!; + + final bottomLeftCenter = Offset(size.width / 4, size.height * 3 / 4); + final topRightCenter = Offset(size.width * 3 / 4, size.height / 4); + + interactableDrawing + ..startPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(bottomLeftCenter.dx), + quote: interactiveLayer.quoteFromY(bottomLeftCenter.dy), + ) + ..endPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(topRightCenter.dx), + quote: interactiveLayer.quoteFromY(topRightCenter.dy), + ); } } /// If `true` it indicates that the position of the first point is confirmed /// by the user and the second point should be spawned and animated to the /// center of the screen. Once the animation is done, it will become `false`. - bool _animatingSecondPoint = false; - - Offset _getCenterOfScreen() { - final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; - final Size? layerSize = interactiveLayer.layerSize; - - final double centerX = layerSize != null ? layerSize.width / 2 : 0; - final double centerY = layerSize != null ? layerSize.height / 2 : 0; - - return Offset(centerX, centerY); - } + bool _animating = false; @override - bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { - final EdgePoint? startPoint = interactableDrawing.startPoint; - final EdgePoint? endPoint = interactableDrawing.endPoint; - - if (startPoint != null && endPoint == null) { - final startOffset = Offset( - epochToX(startPoint.epoch), - quoteToY(startPoint.quote), - ); - - if ((offset - startOffset).distance <= hitTestMargin) { - return true; - } - } else if (endPoint != null) { - final endOffset = Offset( - epochToX(endPoint.epoch), - quoteToY(endPoint.quote), - ); - - if ((offset - endOffset).distance <= hitTestMargin) { - return true; - } - } - return false; - } + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => + interactableDrawing.hitTest(offset, epochToX, quoteToY); @override void paint( @@ -92,21 +68,7 @@ class TrendLineAddingPreviewMobile final EdgePoint? endPoint = interactableDrawing.endPoint; final Set drawingState = getDrawingState(this); - if (startPoint != null && endPoint == null) { - // Start point is spawned at the chart, user can move it, we should show - // alignment cross-hair on start point. - drawPoint( - startPoint, - epochToX, - quoteToY, - canvas, - paintStyle, - lineStyle, - radius: 5 + animationInfo.stateChangePercent * 3, - ); - drawPointAlignmentGuides(canvas, size, - Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote))); - } else if (startPoint != null && endPoint != null) { + if (startPoint != null && endPoint != null) { // End point is also spawned at the chart, user can move it, we should // show alignment cross-hair on end point. @@ -117,27 +79,49 @@ class TrendLineAddingPreviewMobile late final Offset endOffset; - if (_animatingSecondPoint) { - endOffset = Offset.lerp( - startOffset, - targetEndOffset, - animationInfo.stateChangePercent, - )!; - } else { - endOffset = targetEndOffset; - } + endOffset = targetEndOffset; + + print(5 + 8 * animationInfo.stateChangePercent); drawPointOffset( - endOffset, + startOffset, epochToX, quoteToY, canvas, paintStyle, lineStyle, - radius: 5 + animationInfo.stateChangePercent * 3, ); + if (interactableDrawing.isDraggingStartPoint != null && + interactableDrawing.isDraggingStartPoint!) { + drawFocusedCircle( + paintStyle, + lineStyle, + canvas, + startOffset, + 4 + 8 * animationInfo.stateChangePercent, + 4, + ); - drawPointAlignmentGuides(canvas, size, endOffset); + drawPointAlignmentGuides(canvas, size, startOffset); + } + + drawPointOffset( + endOffset, epochToX, quoteToY, canvas, paintStyle, lineStyle, + radius: 4); + + if (interactableDrawing.isDraggingStartPoint != null && + !interactableDrawing.isDraggingStartPoint!) { + drawFocusedCircle( + paintStyle, + lineStyle, + canvas, + endOffset, + 4 + 8 * animationInfo.stateChangePercent, + 4, + ); + + drawPointAlignmentGuides(canvas, size, endOffset); + } // Use glowy paint style if selected, otherwise use normal paint style final Paint paint = drawingState.contains(DrawingToolState.selected) || @@ -161,32 +145,70 @@ class TrendLineAddingPreviewMobile final EdgePoint? startPoint = interactableDrawing.startPoint; final EdgePoint? endPoint = interactableDrawing.endPoint; - if (startPoint == null) { - interactableDrawing.startPoint = EdgePoint( - epoch: epochFromX(details.localPosition.dx), - quote: quoteFromY(details.localPosition.dy), - ); - } else if (endPoint == null) { - _animatingSecondPoint = true; - interactiveLayerBehaviour - .updateStateTo( - interactiveLayerBehaviour.currentState, - StateChangeAnimationDirection.forward, - waitForAnimation: true, - ) - .then( - (_) => _animatingSecondPoint = false, - ); - - final Offset centerOffset = _getCenterOfScreen(); - - interactableDrawing.endPoint = EdgePoint( - epoch: epochFromX(centerOffset.dx), - quote: quoteFromY(centerOffset.dy), - ); - } else { + if (!interactableDrawing.hitTest( + details.localPosition, epochToX, quoteToY)) { onDone(); } + + // if (startPoint == null) { + // interactableDrawing.startPoint = EdgePoint( + // epoch: epochFromX(details.localPosition.dx), + // quote: quoteFromY(details.localPosition.dy), + // ); + // } else if (endPoint == null) { + // _animatingSecondPoint = true; + // interactiveLayerBehaviour + // .updateStateTo( + // interactiveLayerBehaviour.currentState, + // StateChangeAnimationDirection.forward, + // waitForAnimation: true, + // ) + // .then( + // (_) => _animatingSecondPoint = false, + // ); + // + // final Offset centerOffset = _getCenterOfScreen(); + // + // interactableDrawing.endPoint = EdgePoint( + // epoch: epochFromX(centerOffset.dx), + // quote: quoteFromY(centerOffset.dy), + // ); + // } else { + // onDone(); + // } + } + + @override + void onDragStart(DragStartDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + interactiveLayerBehaviour + .updateStateTo( + interactiveLayerBehaviour.currentState, + StateChangeAnimationDirection.forward, + waitForAnimation: true, + ) + .then( + (_) => _animating = false, + ); + + interactableDrawing.onDragStart( + details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onDragEnd(DragEndDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + interactiveLayerBehaviour + .updateStateTo( + interactiveLayerBehaviour.currentState, + StateChangeAnimationDirection.backward, + waitForAnimation: true, + ) + .then( + (_) => _animating = false, + ); + interactableDrawing.onDragEnd( + details, epochFromX, quoteFromY, epochToX, quoteToY); } @override @@ -197,40 +219,47 @@ class TrendLineAddingPreviewMobile EpochToX epochToX, QuoteToY quoteToY, ) { - final EdgePoint? startPoint = interactableDrawing.startPoint; - final EdgePoint? endPoint = interactableDrawing.endPoint; - - if (startPoint != null && endPoint == null) { - // If we're dragging the start point, we need to update its position - final Offset startOffset = - Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); - - // Apply the delta to get the new screen position - final Offset newOffset = startOffset + details.delta; - - // Convert back to epoch and quote coordinates - final int newEpoch = epochFromX(newOffset.dx); - final double newQuote = quoteFromY(newOffset.dy); - - // Update the start point - interactableDrawing.startPoint = - EdgePoint(epoch: newEpoch, quote: newQuote); - } else if (endPoint != null) { - // If we're dragging the start point, we need to update its position - final Offset endOffset = - Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); - - // Apply the delta to get the new screen position - final Offset newOffset = endOffset + details.delta; - - // Convert back to epoch and quote coordinates - final int newEpoch = epochFromX(newOffset.dx); - final double newQuote = quoteFromY(newOffset.dy); + interactableDrawing.onDragUpdate( + details, epochFromX, quoteFromY, epochToX, quoteToY); + // final EdgePoint? startPoint = interactableDrawing.startPoint; + // final EdgePoint? endPoint = interactableDrawing.endPoint; + // + // if (startPoint != null && endPoint == null) { + // // If we're dragging the start point, we need to update its position + // final Offset startOffset = + // Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); + // + // // Apply the delta to get the new screen position + // final Offset newOffset = startOffset + details.delta; + // + // // Convert back to epoch and quote coordinates + // final int newEpoch = epochFromX(newOffset.dx); + // final double newQuote = quoteFromY(newOffset.dy); + // + // // Update the start point + // interactableDrawing.startPoint = + // EdgePoint(epoch: newEpoch, quote: newQuote); + // } else if (endPoint != null) { + // // If we're dragging the start point, we need to update its position + // final Offset endOffset = + // Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); + // + // // Apply the delta to get the new screen position + // final Offset newOffset = endOffset + details.delta; + // + // // Convert back to epoch and quote coordinates + // final int newEpoch = epochFromX(newOffset.dx); + // final double newQuote = quoteFromY(newOffset.dy); + // + // // Update the start point + // interactableDrawing.endPoint = + // EdgePoint(epoch: newEpoch, quote: newQuote); + // } + } - // Update the start point - interactableDrawing.endPoint = - EdgePoint(epoch: newEpoch, quote: newQuote); - } + @override + bool shouldRepaint(Set drawingState, DrawingV2 oldDrawing) { + return true; } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 2cdd45116..257bcb15d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -41,7 +41,7 @@ class TrendLineInteractableDrawing // null: dragging the whole line // true: dragging the start point // false: dragging the end point - bool? _isDraggingStartPoint; + bool? isDraggingStartPoint; @override void onDragStart( @@ -62,12 +62,12 @@ class TrendLineInteractableDrawing // Check if the drag is starting on the start point if ((details.localPosition - startOffset).distance <= hitTestMargin) { - _isDraggingStartPoint = true; + isDraggingStartPoint = true; return; } // Reset the dragging flag - _isDraggingStartPoint = null; + isDraggingStartPoint = null; final Offset endOffset = Offset( epochToX(endPoint!.epoch), @@ -80,13 +80,13 @@ class TrendLineInteractableDrawing // If the drag is starting on the start point if (startDistance <= hitTestMargin) { - _isDraggingStartPoint = true; + isDraggingStartPoint = true; return; } // If the drag is starting on the end point if (endDistance <= hitTestMargin) { - _isDraggingStartPoint = false; + isDraggingStartPoint = false; return; } @@ -206,20 +206,17 @@ class TrendLineInteractableDrawing } // Draw alignment guides when dragging - if (drawingState.contains(DrawingToolState.dragging)) { - _drawAlignmentGuides(canvas, size, startOffset, endOffset, paintStyle); + if (drawingState.contains(DrawingToolState.dragging) && + isDraggingStartPoint != null) { + if (isDraggingStartPoint!) { + drawPointAlignmentGuides(canvas, size, startOffset); + } else { + drawPointAlignmentGuides(canvas, size, endOffset); + } } } } - /// Draws alignment guides (horizontal and vertical lines) from the points - void _drawAlignmentGuides(Canvas canvas, Size size, Offset startOffset, - Offset endOffset, DrawingPaintStyle paintStyle) { - // Draw alignment guides for both start and end points - drawPointAlignmentGuides(canvas, size, startOffset); - drawPointAlignmentGuides(canvas, size, endOffset); - } - @override void onDragUpdate( DragUpdateDetails details, @@ -236,10 +233,10 @@ class TrendLineInteractableDrawing final Offset delta = details.delta; // If we're dragging a specific point (start or end point) - if (_isDraggingStartPoint != null) { + if (isDraggingStartPoint != null) { // Get the current point being dragged final EdgePoint pointBeingDragged = - _isDraggingStartPoint! ? startPoint! : endPoint!; + isDraggingStartPoint! ? startPoint! : endPoint!; // Get the current screen position of the point final Offset currentOffset = Offset( @@ -261,7 +258,7 @@ class TrendLineInteractableDrawing ); // Update the appropriate point - if (_isDraggingStartPoint!) { + if (isDraggingStartPoint!) { startPoint = updatedPoint; } else { endPoint = updatedPoint; @@ -309,7 +306,7 @@ class TrendLineInteractableDrawing QuoteToY quoteToY, ) { // Reset the dragging flag when drag is complete - _isDraggingStartPoint = null; + isDraggingStartPoint = null; } @override From 55f159bac3e11b266513ea2ff2374ce05d8d7676 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 26 May 2025 14:18:59 +0800 Subject: [PATCH 200/311] chore: code cleanup :recycle: --- lib/src/deriv_chart/chart/main_chart.dart | 8 +- .../trend_line_adding_preview_mobile.dart | 125 +++++------------- 2 files changed, 34 insertions(+), 99 deletions(-) diff --git a/lib/src/deriv_chart/chart/main_chart.dart b/lib/src/deriv_chart/chart/main_chart.dart index 1e2c5e3e6..ba5c9ff45 100644 --- a/lib/src/deriv_chart/chart/main_chart.dart +++ b/lib/src/deriv_chart/chart/main_chart.dart @@ -389,10 +389,10 @@ class _ChartImplementationState extends BasicChartState { _buildInteractiveLayer(context, xAxis) else if (widget.drawingTools != null) _buildDrawingToolChart(widget.drawingTools!), - // if (kIsWeb) _buildCrosshairAreaWeb(), - // if (!kIsWeb && - // !(widget.drawingTools?.isDrawingMoving ?? false)) - // _buildCrosshairArea(), + if (kIsWeb) _buildCrosshairAreaWeb(), + if (!kIsWeb && + !(widget.drawingTools?.isDrawingMoving ?? false)) + _buildCrosshairArea(), if (widget.showScrollToLastTickButton && _isScrollToLastTickAvailable) Positioned( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 0f6d7463d..927220bae 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -43,11 +43,6 @@ class TrendLineAddingPreviewMobile } } - /// If `true` it indicates that the position of the first point is confirmed - /// by the user and the second point should be spawned and animated to the - /// center of the screen. Once the animation is done, it will become `false`. - bool _animating = false; - @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => interactableDrawing.hitTest(offset, epochToX, quoteToY); @@ -81,8 +76,6 @@ class TrendLineAddingPreviewMobile endOffset = targetEndOffset; - print(5 + 8 * animationInfo.stateChangePercent); - drawPointOffset( startOffset, epochToX, @@ -142,54 +135,24 @@ class TrendLineAddingPreviewMobile QuoteToY quoteToY, VoidCallback onDone, ) { - final EdgePoint? startPoint = interactableDrawing.startPoint; - final EdgePoint? endPoint = interactableDrawing.endPoint; - if (!interactableDrawing.hitTest( - details.localPosition, epochToX, quoteToY)) { + details.localPosition, + epochToX, + quoteToY, + )) { + // Tap is outside the drawing preview. means adding is confirmed. onDone(); } - - // if (startPoint == null) { - // interactableDrawing.startPoint = EdgePoint( - // epoch: epochFromX(details.localPosition.dx), - // quote: quoteFromY(details.localPosition.dy), - // ); - // } else if (endPoint == null) { - // _animatingSecondPoint = true; - // interactiveLayerBehaviour - // .updateStateTo( - // interactiveLayerBehaviour.currentState, - // StateChangeAnimationDirection.forward, - // waitForAnimation: true, - // ) - // .then( - // (_) => _animatingSecondPoint = false, - // ); - // - // final Offset centerOffset = _getCenterOfScreen(); - // - // interactableDrawing.endPoint = EdgePoint( - // epoch: epochFromX(centerOffset.dx), - // quote: quoteFromY(centerOffset.dy), - // ); - // } else { - // onDone(); - // } } @override void onDragStart(DragStartDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { - interactiveLayerBehaviour - .updateStateTo( - interactiveLayerBehaviour.currentState, - StateChangeAnimationDirection.forward, - waitForAnimation: true, - ) - .then( - (_) => _animating = false, - ); + interactiveLayerBehaviour.updateStateTo( + interactiveLayerBehaviour.currentState, + StateChangeAnimationDirection.forward, + waitForAnimation: true, + ); interactableDrawing.onDragStart( details, epochFromX, quoteFromY, epochToX, quoteToY); @@ -198,17 +161,19 @@ class TrendLineAddingPreviewMobile @override void onDragEnd(DragEndDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { - interactiveLayerBehaviour - .updateStateTo( - interactiveLayerBehaviour.currentState, - StateChangeAnimationDirection.backward, - waitForAnimation: true, - ) - .then( - (_) => _animating = false, - ); + interactiveLayerBehaviour.updateStateTo( + interactiveLayerBehaviour.currentState, + StateChangeAnimationDirection.backward, + waitForAnimation: true, + ); + interactableDrawing.onDragEnd( - details, epochFromX, quoteFromY, epochToX, quoteToY); + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); } @override @@ -218,44 +183,14 @@ class TrendLineAddingPreviewMobile QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - ) { - interactableDrawing.onDragUpdate( - details, epochFromX, quoteFromY, epochToX, quoteToY); - // final EdgePoint? startPoint = interactableDrawing.startPoint; - // final EdgePoint? endPoint = interactableDrawing.endPoint; - // - // if (startPoint != null && endPoint == null) { - // // If we're dragging the start point, we need to update its position - // final Offset startOffset = - // Offset(epochToX(startPoint.epoch), quoteToY(startPoint.quote)); - // - // // Apply the delta to get the new screen position - // final Offset newOffset = startOffset + details.delta; - // - // // Convert back to epoch and quote coordinates - // final int newEpoch = epochFromX(newOffset.dx); - // final double newQuote = quoteFromY(newOffset.dy); - // - // // Update the start point - // interactableDrawing.startPoint = - // EdgePoint(epoch: newEpoch, quote: newQuote); - // } else if (endPoint != null) { - // // If we're dragging the start point, we need to update its position - // final Offset endOffset = - // Offset(epochToX(endPoint.epoch), quoteToY(endPoint.quote)); - // - // // Apply the delta to get the new screen position - // final Offset newOffset = endOffset + details.delta; - // - // // Convert back to epoch and quote coordinates - // final int newEpoch = epochFromX(newOffset.dx); - // final double newQuote = quoteFromY(newOffset.dy); - // - // // Update the start point - // interactableDrawing.endPoint = - // EdgePoint(epoch: newEpoch, quote: newQuote); - // } - } + ) => + interactableDrawing.onDragUpdate( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); @override bool shouldRepaint(Set drawingState, DrawingV2 oldDrawing) { From b64565c0889e1a73139cfd36d69a0d7517c4c999 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 27 May 2025 15:53:48 +0800 Subject: [PATCH 201/311] feat: show trend line preview on mobile as dashed line --- .../trend_line_adding_preview_mobile.dart | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 927220bae..052fa2752 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -122,10 +122,23 @@ class TrendLineAddingPreviewMobile ? paintStyle.linePaintStyle( lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); - canvas.drawLine(startOffset, endOffset, paint); + + final Path linePath = _createLinePath(startOffset, endOffset); + + canvas.drawPath( + dashPath(linePath, dashArray: CircularIntervalList([4, 4])), + Paint() + ..color = paint.color + ..style = PaintingStyle.stroke + ..strokeWidth = paint.strokeWidth, + ); } } + Path _createLinePath(Offset start, Offset end) => Path() + ..moveTo(start.dx, start.dy) + ..lineTo(end.dx, end.dy); + @override void onCreateTap( TapUpDetails details, From fa26a1bbffd920bde5fbfb4a72690989b3a0b880 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 27 May 2025 16:10:17 +0800 Subject: [PATCH 202/311] feat: add chartConfig to drawingv2 paint methods --- .../interactable_drawing_custom_painter.dart | 1 + .../interactable_drawings/drawing_v2.dart | 2 ++ .../horizontal_line_adding_preview_desktop.dart | 2 ++ .../horizontal_line_adding_preview_mobile.dart | 2 ++ .../horizontal_line_interactable_drawing.dart | 2 ++ .../interactable_drawings/interactable_drawing.dart | 2 ++ .../trend_line/adding_tool_alignment_cross_hair.dart | 11 +++++++++-- .../trend_line/trend_line_adding_preview_desktop.dart | 6 ++++-- .../trend_line/trend_line_adding_preview_mobile.dart | 2 ++ .../trend_line/trend_line_interactable_drawing.dart | 10 ++++++---- 10 files changed, 32 insertions(+), 8 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index cae9dbe60..8d539fc58 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -91,6 +91,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { epochToX, quoteToY, animationInfo, + chartConfig, drawingState, ); }); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index 3843a616a..426aa351e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -80,6 +81,7 @@ abstract class DrawingV2 { EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState getDrawingState, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index 0c6d5e73a..0bd91977a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -4,6 +4,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. 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/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/gestures.dart'; import '../../interactable_drawing_custom_painter.dart'; @@ -42,6 +43,7 @@ class HorizontalLineAddingPreviewDesktop EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState drawingState, ) { if (_hoverPosition != null) { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index 974d513aa..1df7d23ae 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/gestures.dart'; import '../../interactable_drawing_custom_painter.dart'; @@ -69,6 +70,7 @@ class HorizontalLineAddingPreviewMobile EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState drawingState, ) { if (interactableDrawing.startPoint != null) { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 55f49030a..00f409299 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -9,6 +9,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawi import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -90,6 +91,7 @@ class HorizontalLineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = config.lineStyle; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 2ede04e55..20197df70 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,5 +1,6 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -94,6 +95,7 @@ abstract class InteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState getDrawingState, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index 363d71f5a..e5dfe4cae 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -4,6 +4,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:flutter/gestures.dart'; import '../../helpers/paint_helpers.dart'; @@ -38,8 +39,14 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { } @override - void paint(Canvas canvas, Size size, EpochToX epochToX, QuoteToY quoteToY, - AnimationInfo animationInfo, GetDrawingState getDrawingState) { + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + GetDrawingState getDrawingState) { if (_currentHoverPosition == null) { return; } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index e15743550..2e1956cd0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -7,6 +7,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; @@ -46,6 +47,7 @@ class TrendLineAddingPreviewDesktop EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = interactableDrawing.config.lineStyle; @@ -72,8 +74,8 @@ class TrendLineAddingPreviewDesktop paintStyle, lineStyle); } - _crossHair.paint( - canvas, size, epochToX, quoteToY, animationInfo, getDrawingState); + _crossHair.paint(canvas, size, epochToX, quoteToY, animationInfo, + chartConfig, getDrawingState); } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 052fa2752..8d3436670 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/state_change_direction.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; @@ -54,6 +55,7 @@ class TrendLineAddingPreviewMobile EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = interactableDrawing.config.lineStyle; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 257bcb15d..f3060ac97 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -7,6 +7,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; @@ -37,10 +38,10 @@ class TrendLineInteractableDrawing /// End point of the line. EdgePoint? endPoint; - // Tracks which point is being dragged, if any - // null: dragging the whole line - // true: dragging the start point - // false: dragging the end point + /// Tracks which point is being dragged, if any + /// null: dragging the whole line + /// true: dragging the start point + /// false: dragging the end point bool? isDraggingStartPoint; @override @@ -165,6 +166,7 @@ class TrendLineInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, AnimationInfo animationInfo, + ChartConfig chartConfig, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = config.lineStyle; From e4f0fe31d56f5a5e57fec99a53a2cc96f0270404 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 27 May 2025 17:08:18 +0800 Subject: [PATCH 203/311] feat: add paintOverYAxis method to DrawingV2 class --- .../helpers/paint_helpers.dart | 81 +++++++++++++++++++ .../interactable_drawing_custom_painter.dart | 10 +++ .../drawing_adding_preview.dart | 13 +++ .../interactable_drawings/drawing_v2.dart | 11 +++ ...horizontal_line_adding_preview_mobile.dart | 19 +++++ .../interactable_drawing.dart | 11 +++ .../adding_tool_alignment_cross_hair.dart | 11 +++ 7 files changed, 156 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 36d46b9bf..95e9e3f54 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -4,6 +4,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. 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/theme/painting_styles/line_style.dart'; +import 'package:flutter/material.dart'; /// Draws alignment guides (horizontal and vertical lines) for a single point void drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { @@ -155,3 +156,83 @@ class CircularIntervalList { return _values[_index++]; } } + +/// Draws a value rectangle with formatted price based on pip size +/// +/// This draws a rounded rectangle with the formatted value inside it. +/// The value is formatted according to the provided pip size. +void drawValueLabel( + Canvas canvas, + QuoteToY quoteToY, + double value, + int pipSize, + Size size, +) { + // Calculate Y position based on the value + final double yPosition = quoteToY(value); + + // Format the value according to pip size + // Format with proper decimal places and ensure leading zeros for decimal part + String formattedValue = value.toStringAsFixed(pipSize); + + // Split the value into integer and decimal parts to format with proper separator + final parts = formattedValue.split('.'); + if (parts.length > 1) { + formattedValue = '${parts[0]}.${parts[1]}'; + } + + // Create text painter to measure text dimensions + final TextPainter textPainter = TextPainter( + text: TextSpan( + text: formattedValue, + style: const TextStyle( + color: Color(0xFF2196F3), + fontSize: 14, + fontWeight: FontWeight.normal, + ), + ), + textDirection: TextDirection.ltr, + textAlign: TextAlign.center, + ); + textPainter.layout(); + + // Create rectangle with padding around the text + final double rectWidth = textPainter.width + 24; + final double rectHeight = 30; // Fixed height to match the image + + // Position the rectangle at the right edge of the screen with some padding + const double rightPadding = 8.0; + final double rectRight = size.width - rightPadding; + final double rectLeft = rectRight - rectWidth; + + final Rect rect = Rect.fromLTRB( + rectLeft, + yPosition - rectHeight / 2, + rectRight, + yPosition + rectHeight / 2, + ); + + // Draw rounded rectangle + final Paint rectPaint = Paint() + ..color = Colors.white + ..style = PaintingStyle.fill; + + final Paint borderPaint = Paint() + ..color = const Color(0xFF2196F3) + ..style = PaintingStyle.stroke + ..strokeWidth = 1.0; + + // Draw the background and border + final RRect roundedRect = RRect.fromRectAndRadius(rect, const Radius.circular(16.0)); + canvas.drawRRect(roundedRect, rectPaint); + canvas.drawRRect(roundedRect, borderPaint); + + // Draw the text centered in the rectangle + textPainter.paint( + canvas, + Offset( + rect.left + (rectWidth - textPainter.width) / 2, + rect.top + (rectHeight - textPainter.height) / 2, + ), + ); +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 8d539fc58..474aeb0ca 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -95,6 +95,16 @@ class InteractableDrawingCustomPainter extends CustomPainter { drawingState, ); }); + + drawing.paintOverYAxis( + canvas, + size, + epochToX, + quoteToY, + animationInfo, + chartConfig, + drawingState, + ); } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart index 788d5856a..bc1eb40ff 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -5,8 +5,10 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer. import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; +import 'package:flutter/rendering.dart'; import '../enums/drawing_tool_state.dart'; +import '../interactable_drawing_custom_painter.dart'; import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; /// A preview of a drawing that is being added to the [InteractiveLayer]. @@ -136,6 +138,17 @@ abstract class DrawingAddingPreview< QuoteToY quoteToY, ) {} + @override + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + GetDrawingState getDrawingState, + ) {} + /// Determines if the drawing preview is within the current chart viewport. /// /// For drawing previews, this always returns `true` because the preview diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index 426aa351e..c9b852208 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -85,6 +85,17 @@ abstract class DrawingV2 { GetDrawingState getDrawingState, ); + /// Paints the drawing tool on the chart. + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + GetDrawingState getDrawingState, + ); + /// Returns true if the drawing tool should repaint. bool shouldRepaint( Set drawingState, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index 1df7d23ae..9a9dfbae0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -90,6 +90,25 @@ class HorizontalLineAddingPreviewMobile } } + @override + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + GetDrawingState getDrawingState, + ) { + drawValueLabel( + canvas, + quoteToY, + interactableDrawing.startPoint!.quote, + chartConfig.pipSize, + size, + ); + } + @override void onCreateTap( TapUpDetails details, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 20197df70..f09d861d0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -110,6 +110,17 @@ abstract class InteractableDrawing drawingState.contains(DrawingToolState.animating); } + @override + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + GetDrawingState getDrawingState, + ) {} + @override bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index e5dfe4cae..d9c53b064 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -70,4 +70,15 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { DrawingV2 oldDrawing, ) => true; + + @override + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + GetDrawingState getDrawingState, + ) {} } From 460fd8eef9c0e4a4579e21ff2c54cbc5e5920f5c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 27 May 2025 17:17:13 +0800 Subject: [PATCH 204/311] WIP: update the preview label based on design --- .../helpers/paint_helpers.dart | 55 ++++++++++--------- ...horizontal_line_adding_preview_mobile.dart | 12 ++-- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 95e9e3f54..89c650da0 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -161,26 +161,28 @@ class CircularIntervalList { /// /// This draws a rounded rectangle with the formatted value inside it. /// The value is formatted according to the provided pip size. -void drawValueLabel( - Canvas canvas, - QuoteToY quoteToY, - double value, - int pipSize, - Size size, -) { +void drawValueLabel({ + required Canvas canvas, + required QuoteToY quoteToY, + required double value, + required int pipSize, + required Size size, + Color color = Colors.white, + Color backgroundColor = Colors.transparent, +}) { // Calculate Y position based on the value final double yPosition = quoteToY(value); - + // Format the value according to pip size // Format with proper decimal places and ensure leading zeros for decimal part String formattedValue = value.toStringAsFixed(pipSize); - + // Split the value into integer and decimal parts to format with proper separator final parts = formattedValue.split('.'); if (parts.length > 1) { formattedValue = '${parts[0]}.${parts[1]}'; } - + // Create text painter to measure text dimensions final TextPainter textPainter = TextPainter( text: TextSpan( @@ -193,40 +195,41 @@ void drawValueLabel( ), textDirection: TextDirection.ltr, textAlign: TextAlign.center, - ); - textPainter.layout(); - + )..layout(); + // Create rectangle with padding around the text final double rectWidth = textPainter.width + 24; - final double rectHeight = 30; // Fixed height to match the image - + const double rectHeight = 30; // Fixed height to match the image + // Position the rectangle at the right edge of the screen with some padding - const double rightPadding = 8.0; + const double rightPadding = 8; final double rectRight = size.width - rightPadding; final double rectLeft = rectRight - rectWidth; - + final Rect rect = Rect.fromLTRB( rectLeft, yPosition - rectHeight / 2, rectRight, yPosition + rectHeight / 2, ); - + // Draw rounded rectangle final Paint rectPaint = Paint() - ..color = Colors.white + ..color = backgroundColor ..style = PaintingStyle.fill; - + final Paint borderPaint = Paint() - ..color = const Color(0xFF2196F3) + ..color = color ..style = PaintingStyle.stroke ..strokeWidth = 1.0; - + // Draw the background and border - final RRect roundedRect = RRect.fromRectAndRadius(rect, const Radius.circular(16.0)); - canvas.drawRRect(roundedRect, rectPaint); - canvas.drawRRect(roundedRect, borderPaint); - + final RRect roundedRect = + RRect.fromRectAndRadius(rect, const Radius.circular(4)); + canvas + ..drawRRect(roundedRect, rectPaint) + ..drawRRect(roundedRect, borderPaint); + // Draw the text centered in the rectangle textPainter.paint( canvas, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index 9a9dfbae0..a64b9112e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -1,5 +1,6 @@ import 'dart:ui'; +import 'package:deriv_chart/deriv_chart.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/edge_point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; @@ -101,11 +102,12 @@ class HorizontalLineAddingPreviewMobile GetDrawingState getDrawingState, ) { drawValueLabel( - canvas, - quoteToY, - interactableDrawing.startPoint!.quote, - chartConfig.pipSize, - size, + canvas: canvas, + quoteToY: quoteToY, + value: interactableDrawing.startPoint!.quote, + pipSize: chartConfig.pipSize, + size: size, + color: interactableDrawing.config.lineStyle.color, ); } From 6016baf815b6b6ec85bbb53f2054a59546d5140f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 27 May 2025 17:20:55 +0800 Subject: [PATCH 205/311] feat: add chartTheme to the paint method as well --- .../interactable_drawing_custom_painter.dart | 2 ++ .../drawing_adding_preview.dart | 1 + .../interactable_drawings/drawing_v2.dart | 3 +++ ...horizontal_line_adding_preview_desktop.dart | 2 ++ .../horizontal_line_adding_preview_mobile.dart | 5 ++++- .../horizontal_line_interactable_drawing.dart | 2 ++ .../interactable_drawing.dart | 3 +++ .../adding_tool_alignment_cross_hair.dart | 18 +++++++++++------- .../trend_line_adding_preview_desktop.dart | 4 +++- .../trend_line_adding_preview_mobile.dart | 2 ++ .../trend_line_interactable_drawing.dart | 2 ++ 11 files changed, 35 insertions(+), 9 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 474aeb0ca..3a2e510c3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -92,6 +92,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { quoteToY, animationInfo, chartConfig, + theme, drawingState, ); }); @@ -103,6 +104,7 @@ class InteractableDrawingCustomPainter extends CustomPainter { quoteToY, animationInfo, chartConfig, + theme, drawingState, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart index bc1eb40ff..045fb3ed2 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -146,6 +146,7 @@ abstract class DrawingAddingPreview< QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) {} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index c9b852208..b85dbe3d1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -82,6 +83,7 @@ abstract class DrawingV2 { QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ); @@ -93,6 +95,7 @@ abstract class DrawingV2 { QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index 0bd91977a..70fe9527f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; import '../../interactable_drawing_custom_painter.dart'; @@ -44,6 +45,7 @@ class HorizontalLineAddingPreviewDesktop QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState drawingState, ) { if (_hoverPosition != null) { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index a64b9112e..7fb4fff6f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -72,6 +72,7 @@ class HorizontalLineAddingPreviewMobile QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState drawingState, ) { if (interactableDrawing.startPoint != null) { @@ -99,15 +100,17 @@ class HorizontalLineAddingPreviewMobile QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) { drawValueLabel( - canvas: canvas, + canvas: canvas, quoteToY: quoteToY, value: interactableDrawing.startPoint!.quote, pipSize: chartConfig.pipSize, size: size, color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 00f409299..809266ef9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -10,6 +10,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawi import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; import 'package:deriv_chart/src/models/axis_range.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/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -92,6 +93,7 @@ class HorizontalLineInteractableDrawing QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = config.lineStyle; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index f09d861d0..10732b672 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,6 +1,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/widgets.dart'; @@ -96,6 +97,7 @@ abstract class InteractableDrawing QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ); @@ -118,6 +120,7 @@ abstract class InteractableDrawing QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) {} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index d9c53b064..c44fddb27 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; import '../../helpers/paint_helpers.dart'; @@ -40,13 +41,15 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { @override void paint( - Canvas canvas, - Size size, - EpochToX epochToX, - QuoteToY quoteToY, - AnimationInfo animationInfo, - ChartConfig chartConfig, - GetDrawingState getDrawingState) { + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { if (_currentHoverPosition == null) { return; } @@ -79,6 +82,7 @@ class AddingToolAlignmentCrossHair extends DrawingV2 { QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) {} } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index 2e1956cd0..f3f3c6856 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -8,6 +8,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_help import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.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/gestures.dart'; @@ -48,6 +49,7 @@ class TrendLineAddingPreviewDesktop QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = interactableDrawing.config.lineStyle; @@ -75,7 +77,7 @@ class TrendLineAddingPreviewDesktop } _crossHair.paint(canvas, size, epochToX, quoteToY, animationInfo, - chartConfig, getDrawingState); + chartConfig, chartTheme, getDrawingState); } @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 8d3436670..27203506c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/state_change_direction.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.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 'package:flutter/widgets.dart'; @@ -56,6 +57,7 @@ class TrendLineAddingPreviewMobile QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = interactableDrawing.config.lineStyle; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index f3060ac97..40ac8d96b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -8,6 +8,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/drawing_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.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/widgets.dart'; @@ -167,6 +168,7 @@ class TrendLineInteractableDrawing QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, + ChartTheme chartTheme, GetDrawingState getDrawingState, ) { final LineStyle lineStyle = config.lineStyle; From b0d02566adfb420d989104cd0bc8f2673e85f247 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 27 May 2025 17:23:17 +0800 Subject: [PATCH 206/311] fix the drawing preview label color --- .../interactive_layer/helpers/paint_helpers.dart | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 89c650da0..69fd680aa 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -187,8 +187,8 @@ void drawValueLabel({ final TextPainter textPainter = TextPainter( text: TextSpan( text: formattedValue, - style: const TextStyle( - color: Color(0xFF2196F3), + style: TextStyle( + color: color, fontSize: 14, fontWeight: FontWeight.normal, ), @@ -201,9 +201,7 @@ void drawValueLabel({ final double rectWidth = textPainter.width + 24; const double rectHeight = 30; // Fixed height to match the image - // Position the rectangle at the right edge of the screen with some padding - const double rightPadding = 8; - final double rectRight = size.width - rightPadding; + final double rectRight = size.width; final double rectLeft = rectRight - rectWidth; final Rect rect = Rect.fromLTRB( From 3c76d65d3bf87194208274dfe95aee65bc1f7932 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 27 May 2025 17:30:59 +0800 Subject: [PATCH 207/311] feat: show the label when horizontal tools is selected --- .../helpers/paint_helpers.dart | 42 +++++++++---------- .../horizontal_line_interactable_drawing.dart | 26 ++++++++++++ 2 files changed, 47 insertions(+), 21 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 69fd680aa..c9cc87477 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -173,29 +173,12 @@ void drawValueLabel({ // Calculate Y position based on the value final double yPosition = quoteToY(value); - // Format the value according to pip size - // Format with proper decimal places and ensure leading zeros for decimal part - String formattedValue = value.toStringAsFixed(pipSize); - - // Split the value into integer and decimal parts to format with proper separator - final parts = formattedValue.split('.'); - if (parts.length > 1) { - formattedValue = '${parts[0]}.${parts[1]}'; - } + // Format the value according to pip size with proper decimal places + final String formattedValue = value.toStringAsFixed(pipSize); // Create text painter to measure text dimensions - final TextPainter textPainter = TextPainter( - text: TextSpan( - text: formattedValue, - style: TextStyle( - color: color, - fontSize: 14, - fontWeight: FontWeight.normal, - ), - ), - textDirection: TextDirection.ltr, - textAlign: TextAlign.center, - )..layout(); + final TextPainter textPainter = _getTextPainter(formattedValue, color) + ..layout(); // Create rectangle with padding around the text final double rectWidth = textPainter.width + 24; @@ -237,3 +220,20 @@ void drawValueLabel({ ), ); } + +/// Returns a [TextPainter] for the given formatted value and color. +TextPainter _getTextPainter(String formattedValue, Color color) { + final TextPainter textPainter = TextPainter( + text: TextSpan( + text: formattedValue, + style: TextStyle( + color: color, + fontSize: 14, + fontWeight: FontWeight.normal, + ), + ), + textDirection: TextDirection.ltr, + textAlign: TextAlign.center, + ); + return textPainter; +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 809266ef9..c81185d82 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -189,6 +189,32 @@ class HorizontalLineInteractableDrawing ); } + @override + void paintOverYAxis( + ui.Canvas canvas, + ui.Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { + if (getDrawingState(this).contains(DrawingToolState.selected)) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: startPoint!.quote, + pipSize: chartConfig.pipSize, + size: size, + color: config.lineStyle.color + .withOpacity(animationInfo.stateChangePercent), + backgroundColor: chartTheme.backgroundColor + .withOpacity(animationInfo.stateChangePercent), + ); + } + } + @override void onDragUpdate( DragUpdateDetails details, From 6b8349cf3a28ff8560d4a4d0f94901e928002b04 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 28 May 2025 00:07:08 +0800 Subject: [PATCH 208/311] feat: showing neon glowing effect when horizontal line is selected --- .../horizontal_line_interactable_drawing.dart | 62 +++---------------- 1 file changed, 8 insertions(+), 54 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index c81185d82..5223e9040 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -115,26 +115,14 @@ class HorizontalLineInteractableDrawing canvas.drawLine(startOffset, endOffset, paint); - // Draw endpoints with glowy effect if selected - if (drawingState.contains(DrawingToolState.selected) || - drawingState.contains(DrawingToolState.dragging)) { - _drawPointsFocusedCircle( - paintStyle, - lineStyle, - canvas, - startOffset, - 10 * animationInfo.stateChangePercent, - 3 * animationInfo.stateChangePercent, - endOffset, - ); - } else if (drawingState.contains(DrawingToolState.hovered)) { - _drawPointsFocusedCircle( - paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); - } - - // Draw alignment guides when dragging - if (drawingState.contains(DrawingToolState.dragging)) { - drawPointAlignmentGuides(canvas, size, startOffset); + if (drawingState.contains(DrawingToolState.selected)) { + final neonPain = Paint() + ..color = config.lineStyle.color.withOpacity(0.4) + ..strokeWidth = 8 * animationInfo.stateChangePercent + ..strokeCap = StrokeCap.round + ..style = PaintingStyle.stroke + ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 6); + canvas.drawLine(startOffset, endOffset, neonPain); } } else { if (startPoint == null && _hoverPosition != null) { @@ -155,40 +143,6 @@ class HorizontalLineInteractableDrawing } } - void _drawPointsFocusedCircle( - DrawingPaintStyle paintStyle, - LineStyle lineStyle, - ui.Canvas canvas, - ui.Offset startOffset, - double outerCircleRadius, - double innerCircleRadius, - ui.Offset endOffset) { - final normalPaintStyle = paintStyle.glowyCirclePaintStyle(lineStyle.color); - final glowyPaintStyle = - paintStyle.glowyCirclePaintStyle(lineStyle.color.withOpacity(0.3)); - canvas - ..drawCircle( - startOffset, - outerCircleRadius, - glowyPaintStyle, - ) - ..drawCircle( - startOffset, - innerCircleRadius, - normalPaintStyle, - ) - ..drawCircle( - endOffset, - outerCircleRadius, - glowyPaintStyle, - ) - ..drawCircle( - endOffset, - innerCircleRadius, - normalPaintStyle, - ); - } - @override void paintOverYAxis( ui.Canvas canvas, From 636b9e4a7e4817a0c829a0ce75a7d67c3fda1c87 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 28 May 2025 14:51:17 +0800 Subject: [PATCH 209/311] feat: showing selected tool menu --- lib/src/deriv_chart/deriv_chart.dart | 7 +- .../interactive_layer/interactive_layer.dart | 94 +++++++++++++++++++ .../interactive_layer_behaviour.dart | 7 ++ .../interactive_layer_desktop_behaviour.dart | 3 + .../interactive_layer_mobile_behaviour.dart | 3 + .../interactive_normal_state.dart | 2 + .../interactive_selected_tool_state.dart | 13 ++- .../interactive_state.dart | 4 +- 8 files changed, 128 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 01e999a8a..2e51de675 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -12,6 +12,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_serie import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/markers/marker_series.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_object.dart'; import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/misc/callbacks.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; @@ -213,8 +214,10 @@ class _DerivChartState extends State { _interactiveLayerBehaviour = widget.interactiveLayerBehaviour ?? (kIsWeb - ? InteractiveLayerDesktopBehaviour() - : InteractiveLayerMobileBehaviour()); + ? InteractiveLayerDesktopBehaviour( + controller: InteractiveLayerController()) + : InteractiveLayerMobileBehaviour( + controller: InteractiveLayerController())); _initRepos(); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 7a028a6f8..c9ad85a45 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -112,6 +112,7 @@ class _InteractiveLayerState extends State { InteractiveSelectedToolState( selected: drawing, interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + source: '5' ), StateChangeAnimationDirection.forward, ); @@ -413,6 +414,21 @@ class _InteractiveLayerGestureHandlerState ), )) .toList(), + if (widget.interactiveLayerBehaviour.controller != + null && + widget.interactiveLayerBehaviour.controller! + .selectedDrawing != + null) + ListenableBuilder( + listenable: widget + .interactiveLayerBehaviour.controller!, + builder: (_, __) { + return SelectedDrawingFloatingMenu( + drawing: widget.interactiveLayerBehaviour + .controller!.selectedDrawing!, + ); + }, + ) ], ); }), @@ -423,6 +439,7 @@ class _InteractiveLayerGestureHandlerState } void onTap(TapUpDetails details) { + print('### Layer onTap ${DateTime.now()}'); widget.interactiveLayerBehaviour.onTap(details); _interactionNotifier.notify(); } @@ -457,3 +474,80 @@ class _InteractiveLayerGestureHandlerState @override Size? get layerSize => _size; } + +/// A controller similar to [ListView.scrollController] to control interactive +/// layer from outside in addition to get some information from internal +/// states of layer to outside. +/// +/// This controller acts as the bridge between outside of the chart component +/// and interactive layer. +class InteractiveLayerController extends ChangeNotifier { + InteractableDrawing? _selectedDrawing; + + /// The current selected drawing of the [InteractiveLayer]. + InteractableDrawing? get selectedDrawing => + _selectedDrawing; + + /// Sets the selected drawing of the [InteractiveLayer]. + set selectedDrawing( + InteractableDrawing? drawing, + ) { + _selectedDrawing = drawing; + notifyListeners(); + } +} + +class SelectedDrawingFloatingMenu extends StatefulWidget { + const SelectedDrawingFloatingMenu({ + required this.drawing, + super.key, + }); + + final InteractableDrawing drawing; + + @override + State createState() => + _SelectedDrawingFloatingMenuState(); +} + +class _SelectedDrawingFloatingMenuState + extends State { + Offset _floatingMenuPosition = Offset.zero; + + @override + Widget build(BuildContext context) { + return Positioned( + left: _floatingMenuPosition.dx, + top: _floatingMenuPosition.dy, + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onPanUpdate: (details) { + print('### SlectedDrawingFloatingMenu onTap ${DateTime.now()}'); + + _floatingMenuPosition += details.delta; + setState(() => {}); + }, + onLongPress: () {}, + onTapUp: (_) => + print('### SlectedDrawingFloatingMenu onTap ${DateTime.now()}'), + onTap: () { + print('### SelectedDrawingFloatingMenu onTap ${DateTime.now()}'); + }, + onPanStart: (_) {}, + onPanEnd: (_) {}, + child: Container( + decoration: BoxDecoration( + color: Colors.red, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + children: [ + const Icon(Icons.drag_handle, color: Colors.white), + Text(widget.drawing.runtimeType.toString()) + ], + ), + ), + ), + ); + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 52b26bb0c..4d8d17cde 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -2,6 +2,7 @@ import 'dart:async'; import 'dart:ui'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:flutter/gestures.dart'; @@ -27,6 +28,12 @@ import '../interactive_layer_states/interactive_state.dart'; /// [InteractiveLayerDesktopBehaviour] to see specific implementations for two /// different platforms. abstract class InteractiveLayerBehaviour { + /// Creates an instance of [InteractiveLayerBehaviour]. + InteractiveLayerBehaviour({this.controller}); + + /// Optional controller for the interactive layer. + final InteractiveLayerController? controller; + late InteractiveState _interactiveState; /// Current state of the interactive layer. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart index 4ea952180..b47072b8f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart @@ -6,6 +6,9 @@ import 'interactive_layer_behaviour.dart'; /// The Desktop-specific implementation of the interactive layer behaviour. class InteractiveLayerDesktopBehaviour extends InteractiveLayerBehaviour { + /// Creates an instance of [InteractiveLayerDesktopBehaviour]. + InteractiveLayerDesktopBehaviour({super.controller}); + @override DrawingAddingPreview getAddingDrawingPreview( InteractableDrawing drawing, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart index f434ddd7e..2e1641654 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart @@ -8,6 +8,9 @@ import 'interactive_layer_behaviour.dart'; /// The mobile-specific implementation of the interactive layer behaviour. class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { + /// Creates an instance of [InteractiveLayerMobileBehaviour]. + InteractiveLayerMobileBehaviour({super.controller}); + @override void onAddDrawingTool(DrawingToolConfig drawingTool) { final newState = InteractiveAddingToolStateMobile( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart index 8375b907b..23cee5cdf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart @@ -39,6 +39,7 @@ class InteractiveNormalState extends InteractiveState final InteractiveState newState = InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, + source: '3' ); interactiveLayerBehaviour.updateStateTo( @@ -66,6 +67,7 @@ class InteractiveNormalState extends InteractiveState InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, + source: '4' ), StateChangeAnimationDirection.forward, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index dec409b49..b63982742 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -1,5 +1,5 @@ -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import '../enums/drawing_tool_state.dart'; @@ -30,7 +30,11 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState({ required this.selected, required super.interactiveLayerBehaviour, - }); + required String source, + }) { + interactiveLayerBehaviour.controller?.selectedDrawing = selected; + print('###### Transition to SELECTED from $source ${DateTime.now()}'); + } /// The selected tool. /// @@ -40,6 +44,9 @@ class InteractiveSelectedToolState extends InteractiveState bool _draggingStartedOnTool = false; + + + @override Set getToolState(DrawingV2 drawing) { final Set hoveredState = super.getToolState(drawing); @@ -86,6 +93,7 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, + source: '1' )..onPanStart(details), StateChangeAnimationDirection.forward, ); @@ -118,6 +126,7 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, + source: '2' ), StateChangeAnimationDirection.forward, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart index 276e087df..34d9b6146 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart @@ -27,7 +27,9 @@ abstract class InteractiveState { /// The [interactiveLayer] parameter provides a reference to the layer that owns /// this state, allowing the state to call methods on the layer such as updating /// to a new state or adding/saving drawings. - InteractiveState({required this.interactiveLayerBehaviour}); + InteractiveState({required this.interactiveLayerBehaviour}) { + interactiveLayerBehaviour.controller?.selectedDrawing = null; + } /// Returns the state of the drawing tool. /// From 19834f333f8fc0daab078d713bf6c7227caa7306 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 28 May 2025 16:14:40 +0800 Subject: [PATCH 210/311] check start-end point distance for onTap in CustomGestureDetector --- .../gestures/custom_gesture_detector.dart | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart b/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart index f276e2513..0a946df15 100644 --- a/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart +++ b/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart @@ -94,6 +94,7 @@ class CustomGestureDetector extends StatefulWidget { class _CustomGestureDetectorState extends State { int get pointersDown => _pointersDown; int _pointersDown = 0; + set pointersDown(int value) { _onPointersDownWillChange(value); _pointersDown = value; @@ -110,7 +111,11 @@ class _CustomGestureDetectorState extends State { Widget build(BuildContext context) => Listener( onPointerDown: (PointerDownEvent event) => pointersDown += 1, onPointerCancel: (PointerCancelEvent event) => pointersDown -= 1, - onPointerUp: (PointerUpEvent event) => pointersDown -= 1, + onPointerUp: (PointerUpEvent event) { + // Update the last point with the current position when pointer is lifted + _localLastPoint = event.localPosition; + pointersDown -= 1; + }, child: GestureDetector( onScaleStart: _onScaleStart, onScaleUpdate: _onScaleUpdate, @@ -144,11 +149,16 @@ class _CustomGestureDetectorState extends State { if (_longPressed) { _onLongPressEnd(); } else if (_tap) { - widget.onTapUp?.call(TapUpDetails( - globalPosition: _localStartPoint, - localPosition: _localLastPoint, - kind: PointerDeviceKind.touch, - )); + final double distance = (_localStartPoint - _localLastPoint).distance; + + // Only trigger tap if the distance is within the threshold + if (distance <= longPressHoldRadius) { + widget.onTapUp?.call(TapUpDetails( + globalPosition: _localStartPoint, + localPosition: _localLastPoint, + kind: PointerDeviceKind.touch, + )); + } } } } From c44e0cf77dd9d5b8fba0ee6a0b49d0bf0d71a352 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 28 May 2025 16:17:53 +0800 Subject: [PATCH 211/311] chore: code cleanup :recycle: --- .../deriv_chart/chart/gestures/custom_gesture_detector.dart | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart b/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart index 0a946df15..e2364f769 100644 --- a/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart +++ b/lib/src/deriv_chart/chart/gestures/custom_gesture_detector.dart @@ -13,6 +13,10 @@ const Duration longPressHoldDuration = Duration(milliseconds: 500); /// long press is cancelled. const int longPressHoldRadius = 5; +/// If contact point is moved by more than [tapRadius] from its original place, +/// tap is cancelled. +const double tapRadius = 5; + /// Widget to track pan and scale gestures on one area. /// /// GestureDetector doesn't allow to track both Pan and Scale gestures @@ -152,7 +156,7 @@ class _CustomGestureDetectorState extends State { final double distance = (_localStartPoint - _localLastPoint).distance; // Only trigger tap if the distance is within the threshold - if (distance <= longPressHoldRadius) { + if (distance <= tapRadius) { widget.onTapUp?.call(TapUpDetails( globalPosition: _localStartPoint, localPosition: _localLastPoint, From fd2ea3711b6f1151630f0fb89ada489c9b6192dd Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 28 May 2025 17:02:31 +0800 Subject: [PATCH 212/311] check if initialized drawing are initailzied --- .../interactive_layer/interactive_layer.dart | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index c9ad85a45..82bb29e6c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -81,6 +81,8 @@ class _InteractiveLayerState extends State { final Map _interactableDrawings = {}; + bool _drawingsInitialized = false; + /// Timers for debouncing repository updates /// /// We use a map to have one timer per each drawing tool config. This is @@ -108,14 +110,19 @@ class _InteractiveLayerState extends State { // Add new drawing if it doesn't exist final drawing = config.getInteractableDrawing(); _interactableDrawings[config.configId!] = drawing; - widget.interactiveLayerBehaviour.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayerBehaviour: widget.interactiveLayerBehaviour, - source: '5' - ), - StateChangeAnimationDirection.forward, - ); + + if (_drawingsInitialized) { + widget.interactiveLayerBehaviour.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + source: '5', + ), + StateChangeAnimationDirection.forward, + ); + } else { + _drawingsInitialized = true; + } } } From 5045b8cc7f041ef6379009db423f4ede32ad4ae9 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 29 May 2025 18:28:58 +0800 Subject: [PATCH 213/311] chore: remove debugging code --- .../interactive_layer/interactive_layer.dart | 12 ------------ .../interactive_normal_state.dart | 2 -- .../interactive_selected_tool_state.dart | 4 ---- 3 files changed, 18 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 82bb29e6c..1ffded922 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -116,7 +116,6 @@ class _InteractiveLayerState extends State { InteractiveSelectedToolState( selected: drawing, interactiveLayerBehaviour: widget.interactiveLayerBehaviour, - source: '5', ), StateChangeAnimationDirection.forward, ); @@ -446,7 +445,6 @@ class _InteractiveLayerGestureHandlerState } void onTap(TapUpDetails details) { - print('### Layer onTap ${DateTime.now()}'); widget.interactiveLayerBehaviour.onTap(details); _interactionNotifier.notify(); } @@ -529,19 +527,9 @@ class _SelectedDrawingFloatingMenuState child: GestureDetector( behavior: HitTestBehavior.opaque, onPanUpdate: (details) { - print('### SlectedDrawingFloatingMenu onTap ${DateTime.now()}'); - _floatingMenuPosition += details.delta; setState(() => {}); }, - onLongPress: () {}, - onTapUp: (_) => - print('### SlectedDrawingFloatingMenu onTap ${DateTime.now()}'), - onTap: () { - print('### SelectedDrawingFloatingMenu onTap ${DateTime.now()}'); - }, - onPanStart: (_) {}, - onPanEnd: (_) {}, child: Container( decoration: BoxDecoration( color: Colors.red, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart index 23cee5cdf..8375b907b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart @@ -39,7 +39,6 @@ class InteractiveNormalState extends InteractiveState final InteractiveState newState = InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, - source: '3' ); interactiveLayerBehaviour.updateStateTo( @@ -67,7 +66,6 @@ class InteractiveNormalState extends InteractiveState InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, - source: '4' ), StateChangeAnimationDirection.forward, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index b63982742..150935a52 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -30,10 +30,8 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState({ required this.selected, required super.interactiveLayerBehaviour, - required String source, }) { interactiveLayerBehaviour.controller?.selectedDrawing = selected; - print('###### Transition to SELECTED from $source ${DateTime.now()}'); } /// The selected tool. @@ -93,7 +91,6 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, - source: '1' )..onPanStart(details), StateChangeAnimationDirection.forward, ); @@ -126,7 +123,6 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveSelectedToolState( selected: hitDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, - source: '2' ), StateChangeAnimationDirection.forward, ); From 2075701f9e35a49e9f91eef1fd3fd0b423ff5374 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 30 May 2025 10:00:44 +0800 Subject: [PATCH 214/311] move current state to controller --- .../interactive_layer/interactive_layer.dart | 42 ++++++++++++------- .../interactive_layer_behaviour.dart | 36 ++++++++-------- 2 files changed, 46 insertions(+), 32 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 1ffded922..66616c85e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -23,6 +23,7 @@ import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; import 'enums/state_change_direction.dart'; import 'interactive_layer_behaviours/interactive_layer_behaviour.dart'; +import 'interactive_layer_states/interactive_state.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. @@ -420,21 +421,7 @@ class _InteractiveLayerGestureHandlerState ), )) .toList(), - if (widget.interactiveLayerBehaviour.controller != - null && - widget.interactiveLayerBehaviour.controller! - .selectedDrawing != - null) - ListenableBuilder( - listenable: widget - .interactiveLayerBehaviour.controller!, - builder: (_, __) { - return SelectedDrawingFloatingMenu( - drawing: widget.interactiveLayerBehaviour - .controller!.selectedDrawing!, - ); - }, - ) + _buildSelectedDrawingFloatingMenu() ], ); }), @@ -444,6 +431,19 @@ class _InteractiveLayerGestureHandlerState }); } + Widget _buildSelectedDrawingFloatingMenu() => ListenableBuilder( + listenable: widget.interactiveLayerBehaviour.controller, + builder: (_, __) { + final controller = widget.interactiveLayerBehaviour.controller; + + return controller.selectedDrawing != null + ? SelectedDrawingFloatingMenu( + drawing: controller.selectedDrawing!, + ) + : const SizedBox.shrink(); + }, + ); + void onTap(TapUpDetails details) { widget.interactiveLayerBehaviour.onTap(details); _interactionNotifier.notify(); @@ -487,6 +487,18 @@ class _InteractiveLayerGestureHandlerState /// This controller acts as the bridge between outside of the chart component /// and interactive layer. class InteractiveLayerController extends ChangeNotifier { + /// The current state of the interactive layer. + late InteractiveState _currentState; + + /// Current state of the interactive layer. + InteractiveState get currentState => _currentState; + + /// + set currentState(InteractiveState state) { + _currentState = state; + notifyListeners(); + } + InteractableDrawing? _selectedDrawing; /// The current selected drawing of the [InteractiveLayer]. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 4d8d17cde..22a63ffcd 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -21,7 +21,7 @@ import '../interactive_layer_states/interactive_state.dart'; /// a platform or a condition. /// [InteractiveLayerBase] uses this to manage gestures and the layer state in /// every scenarios. -/// The way we're handling the gestures and [_interactiveState] transitions can +/// The way we're handling the gestures and [currentState] transitions can /// be customized by extending this class. /// /// Check out [InteractiveLayerMobileBehaviour] and @@ -29,15 +29,17 @@ import '../interactive_layer_states/interactive_state.dart'; /// different platforms. abstract class InteractiveLayerBehaviour { /// Creates an instance of [InteractiveLayerBehaviour]. - InteractiveLayerBehaviour({this.controller}); + InteractiveLayerBehaviour({ + InteractiveLayerController? controller, + }) : _controller = controller ?? InteractiveLayerController(); - /// Optional controller for the interactive layer. - final InteractiveLayerController? controller; + late final InteractiveLayerController _controller; - late InteractiveState _interactiveState; + /// The controller for the interactive layer. + InteractiveLayerController get controller => _controller; /// Current state of the interactive layer. - InteractiveState get currentState => _interactiveState; + InteractiveState get currentState => controller.currentState; bool _initialized = false; @@ -59,7 +61,8 @@ abstract class InteractiveLayerBehaviour { _initialized = true; this.interactiveLayer = interactiveLayer; this.onUpdate = onUpdate; - _interactiveState = InteractiveNormalState(interactiveLayerBehaviour: this); + _controller.currentState = + InteractiveNormalState(interactiveLayerBehaviour: this); } /// Return the adding preview of the [drawing] we're currently adding for this @@ -78,12 +81,12 @@ abstract class InteractiveLayerBehaviour { if (waitForAnimation) { await interactiveLayer.animateStateChange(direction); - _interactiveState = newState; + _controller.currentState = newState; onUpdate(); } else { unawaited(interactiveLayer.animateStateChange(direction)); - _interactiveState = newState; + _controller.currentState = newState; onUpdate(); } } @@ -98,7 +101,7 @@ abstract class InteractiveLayerBehaviour { /// The drawings of the interactive layer. Set getToolState(DrawingV2 drawing) => - _interactiveState.getToolState(drawing); + currentState.getToolState(drawing); /// The extra drawings that the current interactive state can show in /// [InteractiveLayerBase]. @@ -106,22 +109,21 @@ abstract class InteractiveLayerBehaviour { /// These [previewDrawings] are usually meant to be drawings with a shorter /// lifespan, used for preview purposes or for showing temporary guides when /// the user is interacting with [InteractiveLayerBase]. - List get previewDrawings => _interactiveState.previewDrawings; + List get previewDrawings => currentState.previewDrawings; /// Handles tap event. - void onTap(TapUpDetails details) => _interactiveState.onTap(details); + void onTap(TapUpDetails details) => currentState.onTap(details); /// Handles pan update event. void onPanUpdate(DragUpdateDetails details) => - _interactiveState.onPanUpdate(details); + currentState.onPanUpdate(details); /// Handles pan end event. - void onPanEnd(DragEndDetails details) => _interactiveState.onPanEnd(details); + void onPanEnd(DragEndDetails details) => currentState.onPanEnd(details); /// Handles pan start event. - void onPanStart(DragStartDetails details) => - _interactiveState.onPanStart(details); + void onPanStart(DragStartDetails details) => currentState.onPanStart(details); /// Handles hover event. - void onHover(PointerHoverEvent event) => _interactiveState.onHover(event); + void onHover(PointerHoverEvent event) => currentState.onHover(event); } From f640e27844b8cc7df5052414c692c7da122625b5 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 30 May 2025 11:38:22 +0800 Subject: [PATCH 215/311] move floating menu widget and controller to a separate file --- lib/src/deriv_chart/deriv_chart.dart | 2 +- .../interactive_layer/interactive_layer.dart | 82 +------------------ .../interactive_layer_behaviour.dart | 2 +- .../interactive_layer_controller.dart | 44 ++++++++++ .../interactive_selected_tool_state.dart | 7 +- .../interactive_state.dart | 2 +- .../selected_drawing_floating_menu.dart | 53 ++++++++++++ 7 files changed, 104 insertions(+), 88 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart create mode 100644 lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 2e51de675..0da91ddf3 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -12,7 +12,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_serie import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/markers/marker_series.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_object.dart'; import 'package:deriv_chart/src/deriv_chart/drawing_tool_chart/drawing_tools.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/misc/callbacks.dart'; import 'package:deriv_chart/src/misc/chart_controller.dart'; import 'package:deriv_chart/src/models/chart_axis_config.dart'; @@ -28,6 +27,7 @@ import 'package:shared_preferences/shared_preferences.dart'; import 'interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; import 'interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +import 'interactive_layer/interactive_layer_controller.dart'; /// A wrapper around the [Chart] which handles adding indicators to the chart. class DerivChart extends StatefulWidget { diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 66616c85e..bedb90013 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -23,7 +23,7 @@ import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; import 'enums/state_change_direction.dart'; import 'interactive_layer_behaviours/interactive_layer_behaviour.dart'; -import 'interactive_layer_states/interactive_state.dart'; +import 'widgets/selected_drawing_floating_menu.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. @@ -439,6 +439,7 @@ class _InteractiveLayerGestureHandlerState return controller.selectedDrawing != null ? SelectedDrawingFloatingMenu( drawing: controller.selectedDrawing!, + controller: widget.interactiveLayerBehaviour.controller, ) : const SizedBox.shrink(); }, @@ -479,82 +480,3 @@ class _InteractiveLayerGestureHandlerState @override Size? get layerSize => _size; } - -/// A controller similar to [ListView.scrollController] to control interactive -/// layer from outside in addition to get some information from internal -/// states of layer to outside. -/// -/// This controller acts as the bridge between outside of the chart component -/// and interactive layer. -class InteractiveLayerController extends ChangeNotifier { - /// The current state of the interactive layer. - late InteractiveState _currentState; - - /// Current state of the interactive layer. - InteractiveState get currentState => _currentState; - - /// - set currentState(InteractiveState state) { - _currentState = state; - notifyListeners(); - } - - InteractableDrawing? _selectedDrawing; - - /// The current selected drawing of the [InteractiveLayer]. - InteractableDrawing? get selectedDrawing => - _selectedDrawing; - - /// Sets the selected drawing of the [InteractiveLayer]. - set selectedDrawing( - InteractableDrawing? drawing, - ) { - _selectedDrawing = drawing; - notifyListeners(); - } -} - -class SelectedDrawingFloatingMenu extends StatefulWidget { - const SelectedDrawingFloatingMenu({ - required this.drawing, - super.key, - }); - - final InteractableDrawing drawing; - - @override - State createState() => - _SelectedDrawingFloatingMenuState(); -} - -class _SelectedDrawingFloatingMenuState - extends State { - Offset _floatingMenuPosition = Offset.zero; - - @override - Widget build(BuildContext context) { - return Positioned( - left: _floatingMenuPosition.dx, - top: _floatingMenuPosition.dy, - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onPanUpdate: (details) { - _floatingMenuPosition += details.delta; - setState(() => {}); - }, - child: Container( - decoration: BoxDecoration( - color: Colors.red, - borderRadius: BorderRadius.circular(8), - ), - child: Row( - children: [ - const Icon(Icons.drag_handle, color: Colors.white), - Text(widget.drawing.runtimeType.toString()) - ], - ), - ), - ), - ); - } -} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 22a63ffcd..a7fa30340 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -2,7 +2,6 @@ import 'dart:async'; import 'dart:ui'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:flutter/gestures.dart'; @@ -13,6 +12,7 @@ import '../interactable_drawings/drawing_adding_preview.dart'; import '../interactable_drawings/drawing_v2.dart'; import '../interactable_drawings/interactable_drawing.dart'; import '../interactive_layer_base.dart'; +import '../interactive_layer_controller.dart'; import '../interactive_layer_states/interactive_adding_tool_state.dart'; import '../interactive_layer_states/interactive_normal_state.dart'; import '../interactive_layer_states/interactive_state.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart new file mode 100644 index 000000000..11b1fa40f --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart @@ -0,0 +1,44 @@ +import 'dart:ui'; + +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:flutter/foundation.dart'; + +import 'interactable_drawings/interactable_drawing.dart'; +import 'interactive_layer_states/interactive_state.dart'; + +/// A controller similar to [ListView.scrollController] to control interactive +/// layer from outside in addition to get some information from internal +/// states of layer to outside. +/// +/// This controller acts as the bridge between outside of the chart component +/// and interactive layer. +class InteractiveLayerController extends ChangeNotifier { + /// The current state of the interactive layer. + late InteractiveState _currentState; + + /// Current state of the interactive layer. + InteractiveState get currentState => _currentState; + + /// The current position of the floating menu. + Offset floatingMenuPosition = Offset.zero; + + /// The current state of the interactive layer. + set currentState(InteractiveState state) { + _currentState = state; + notifyListeners(); + } + + InteractableDrawing? _selectedDrawing; + + /// The current selected drawing of the [InteractiveLayer]. + InteractableDrawing? get selectedDrawing => + _selectedDrawing; + + /// Sets the selected drawing of the [InteractiveLayer]. + set selectedDrawing( + InteractableDrawing? drawing, + ) { + _selectedDrawing = drawing; + notifyListeners(); + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 4a2b2c44e..250a198de 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -1,5 +1,5 @@ -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; @@ -32,7 +32,7 @@ class InteractiveSelectedToolState extends InteractiveState required this.selected, required super.interactiveLayerBehaviour, }) { - interactiveLayerBehaviour.controller?.selectedDrawing = selected; + interactiveLayerBehaviour.controller.selectedDrawing = selected; } /// The selected tool. @@ -43,9 +43,6 @@ class InteractiveSelectedToolState extends InteractiveState bool _draggingStartedOnTool = false; - - - @override Set getToolState(DrawingV2 drawing) { final Set hoveredState = super.getToolState(drawing); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart index 34d9b6146..29dbe11a1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart @@ -28,7 +28,7 @@ abstract class InteractiveState { /// this state, allowing the state to call methods on the layer such as updating /// to a new state or adding/saving drawings. InteractiveState({required this.interactiveLayerBehaviour}) { - interactiveLayerBehaviour.controller?.selectedDrawing = null; + interactiveLayerBehaviour.controller.selectedDrawing = null; } /// Returns the state of the drawing tool. diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart new file mode 100644 index 000000000..f4edb585f --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -0,0 +1,53 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; +import 'package:flutter/material.dart'; + +import '../interactive_layer_controller.dart'; + +/// A floating menu that appears when a drawing is selected. +class SelectedDrawingFloatingMenu extends StatefulWidget { + /// Creates a floating menu for the selected drawing. + const SelectedDrawingFloatingMenu({ + required this.drawing, + required this.controller, + super.key, + }); + + /// The drawing that is currently selected. + final InteractableDrawing drawing; + + /// The controller for the interactive layer. + final InteractiveLayerController controller; + + @override + State createState() => + _SelectedDrawingFloatingMenuState(); +} + +class _SelectedDrawingFloatingMenuState + extends State { + @override + Widget build(BuildContext context) => Positioned( + left: widget.controller.floatingMenuPosition.dx, + top: widget.controller.floatingMenuPosition.dy, + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onPanUpdate: (details) { + widget.controller.floatingMenuPosition += details.delta; + setState(() => {}); + }, + child: Container( + decoration: BoxDecoration( + color: Colors.red, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + children: [ + const Icon(Icons.drag_handle, color: Colors.white), + Text(widget.drawing.runtimeType.toString()) + ], + ), + ), + ), + ); +} From 1ebf0b80451c608dc96da5cc66376f0a3fb2120e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 30 May 2025 11:52:52 +0800 Subject: [PATCH 216/311] chore: code cleanup: --- .../interactive_layer/interactive_layer.dart | 151 ++++++++---------- 1 file changed, 70 insertions(+), 81 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index bedb90013..1501fab2c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -17,6 +17,7 @@ import '../chart/data_visualization/chart_series/data_series.dart'; import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../chart/data_visualization/models/animation_info.dart'; import '../drawing_tool_chart/drawing_tools.dart'; +import 'interactable_drawings/drawing_v2.dart'; import 'interactable_drawings/interactable_drawing.dart'; import 'interactable_drawing_custom_painter.dart'; import 'interaction_notifier.dart'; @@ -344,93 +345,81 @@ class _InteractiveLayerGestureHandlerState widget.interactiveLayerBehaviour.onPanEnd(details); _interactionNotifier.notify(); }, - // TODO(NA): Move this part into separate widget. InteractiveLayer only cares about the interactions and selected tool movement - // It can delegate it to an inner component as well. which we can have different interaction behaviours like per platform as well. - child: RepaintBoundary( - child: MultipleAnimatedBuilder( - animations: [_stateChangeController, _interactionNotifier], - builder: (_, __) { - final double animationValue = - _stateChangeCurve.transform(_stateChangeController.value); - - return Stack( - fit: StackFit.expand, - children: widget.series.input.isEmpty - ? [] - : [ - ...widget.drawings - .map((e) => CustomPaint( - key: ValueKey(e.id), - foregroundPainter: - InteractableDrawingCustomPainter( - drawing: e, - currentDrawingState: widget - .interactiveLayerBehaviour - .getToolState(e), - drawingState: widget - .interactiveLayerBehaviour - .getToolState, - series: widget.series, - theme: context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - epochRange: EpochRange( - rightEpoch: xAxis.rightBoundEpoch, - leftEpoch: xAxis.leftBoundEpoch, - ), - quoteRange: widget.quoteRange, - animationInfo: AnimationInfo( - stateChangePercent: animationValue, - ), - ), - )) - .toList(), - ...widget.interactiveLayerBehaviour.previewDrawings - .map((e) => CustomPaint( - key: ValueKey(e.id), - foregroundPainter: - InteractableDrawingCustomPainter( - drawing: e, - series: widget.series, - currentDrawingState: widget - .interactiveLayerBehaviour - .getToolState(e), - drawingState: widget - .interactiveLayerBehaviour - .getToolState, - theme: - context.watch(), - chartConfig: widget.chartConfig, - epochFromX: xAxis.epochFromX, - epochToX: xAxis.xFromEpoch, - quoteToY: widget.quoteToY, - quoteFromY: widget.quoteFromY, - epochRange: EpochRange( - rightEpoch: - xAxis.rightBoundEpoch, - leftEpoch: xAxis.leftBoundEpoch, - ), - quoteRange: widget.quoteRange, - animationInfo: AnimationInfo( - stateChangePercent: - animationValue) - // onDrawingToolClicked: () => _selectedDrawing = e, - ), - )) - .toList(), - _buildSelectedDrawingFloatingMenu() - ], - ); - }), + child: Stack( + children: [ + _buildDrawingsLayer(context, xAxis), + _buildSelectedDrawingFloatingMenu(), + ], ), ), ); }); } + Widget _buildDrawingsLayer(BuildContext context, XAxisModel xAxis) => + RepaintBoundary( + child: MultipleAnimatedBuilder( + animations: [_stateChangeController, _interactionNotifier], + builder: (_, __) { + final double animationValue = + _stateChangeCurve.transform(_stateChangeController.value); + + return Stack( + fit: StackFit.expand, + children: widget.series.input.isEmpty + ? [] + : [ + ...widget.drawings + .map((DrawingV2 drawing) => _buildDrawing( + drawing, + context, + xAxis, + animationValue, + )) + .toList(), + ...widget.interactiveLayerBehaviour.previewDrawings + .map((DrawingV2 drawing) => _buildDrawing( + drawing, + context, + xAxis, + animationValue, + )) + .toList(), + ], + ); + }), + ); + + CustomPaint _buildDrawing( + DrawingV2 e, + BuildContext context, + XAxisModel xAxis, + double animationValue, + ) => + CustomPaint( + key: ValueKey(e.id), + foregroundPainter: InteractableDrawingCustomPainter( + drawing: e, + currentDrawingState: widget.interactiveLayerBehaviour.getToolState(e), + drawingState: widget.interactiveLayerBehaviour.getToolState, + series: widget.series, + theme: context.watch(), + chartConfig: widget.chartConfig, + epochFromX: xAxis.epochFromX, + epochToX: xAxis.xFromEpoch, + quoteToY: widget.quoteToY, + quoteFromY: widget.quoteFromY, + epochRange: EpochRange( + rightEpoch: xAxis.rightBoundEpoch, + leftEpoch: xAxis.leftBoundEpoch, + ), + quoteRange: widget.quoteRange, + animationInfo: AnimationInfo( + stateChangePercent: animationValue, + ), + ), + ); + Widget _buildSelectedDrawingFloatingMenu() => ListenableBuilder( listenable: widget.interactiveLayerBehaviour.controller, builder: (_, __) { From cca3f1392ec94b880cc8a359027719b9961a5821 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 30 May 2025 13:27:25 +0800 Subject: [PATCH 217/311] prevent floating menu going out of screen --- .../selected_drawing_floating_menu.dart | 95 +++++++++++++++---- 1 file changed, 74 insertions(+), 21 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index f4edb585f..3dfeb52f5 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -1,6 +1,10 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; +import 'package:provider/provider.dart'; import '../interactive_layer_controller.dart'; @@ -26,28 +30,77 @@ class SelectedDrawingFloatingMenu extends StatefulWidget { class _SelectedDrawingFloatingMenuState extends State { + // Store the menu size + Size _menuSize = Size.zero; + @override - Widget build(BuildContext context) => Positioned( - left: widget.controller.floatingMenuPosition.dx, - top: widget.controller.floatingMenuPosition.dy, - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onPanUpdate: (details) { - widget.controller.floatingMenuPosition += details.delta; - setState(() => {}); - }, - child: Container( - decoration: BoxDecoration( - color: Colors.red, - borderRadius: BorderRadius.circular(8), - ), - child: Row( - children: [ - const Icon(Icons.drag_handle, color: Colors.white), - Text(widget.drawing.runtimeType.toString()) - ], - ), + void initState() { + super.initState(); + // Schedule a post-frame callback to get the menu size + WidgetsBinding.instance.addPostFrameCallback((_) { + _updateMenuSize(); + }); + } + + void _updateMenuSize() { + // Get the size of this menu widget + final RenderBox? renderBox = context.findRenderObject() as RenderBox?; + if (renderBox != null) { + setState(() { + _menuSize = renderBox.size; + }); + } + } + + @override + Widget build(BuildContext context) { + // Use MediaQuery to get the screen size as a fallback + final screenSize = MediaQuery.of(context).size; + + return Positioned( + left: widget.controller.floatingMenuPosition.dx, + top: widget.controller.floatingMenuPosition.dy, + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onPanUpdate: (details) { + // Calculate new position + final newPosition = + widget.controller.floatingMenuPosition + details.delta; + + // Update menu size if not already set + if (_menuSize == Size.zero) { + _updateMenuSize(); + } + + // Find the nearest ancestor that provides size constraints + final RenderBox? ancestorBox = + context.findRenderObject()?.parent as RenderBox?; + final Size parentSize = ancestorBox?.size ?? screenSize; + + // Constrain the position to keep the menu within the parent boundaries + final constrainedX = + newPosition.dx.clamp(0.0, parentSize.width - _menuSize.width); + final constrainedY = + newPosition.dy.clamp(0.0, parentSize.height - _menuSize.height); + + widget.controller.floatingMenuPosition = + Offset(constrainedX, constrainedY); + setState(() {}); + }, + child: Container( + decoration: BoxDecoration( + color: context.watch().backgroundColor, + borderRadius: BorderRadius.circular(8), + ), + child: Row( + children: [ + Icon(Icons.delete_outline, + color: context.watch().gridTextColor), + Text(widget.drawing.runtimeType.toString()) + ], ), ), - ); + ), + ); + } } From c81fc669673fbf762c9a77ed788fbbbd8ebbcc62 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 30 May 2025 17:39:31 +0800 Subject: [PATCH 218/311] get tool bar widget from each drawing themselves --- .../horizontal_line_interactable_drawing.dart | 14 +++++++- .../interactable_drawing.dart | 20 ++++++++++-- .../trend_line_interactable_drawing.dart | 8 ++++- .../interactive_layer/interactive_layer.dart | 32 ++++++++----------- .../interactive_layer_base.dart | 4 +-- .../interactive_adding_tool_state.dart | 2 +- .../interactive_selected_tool_state.dart | 2 +- .../selected_drawing_floating_menu.dart | 26 +++++++++------ 8 files changed, 73 insertions(+), 35 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 5223e9040..0023c56df 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -1,6 +1,8 @@ import 'dart:ui' as ui; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/indicators_ui/widgets/color_selector.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'; @@ -13,6 +15,7 @@ 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/gestures.dart'; +import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import '../../enums/drawing_tool_state.dart'; @@ -30,7 +33,7 @@ class HorizontalLineInteractableDrawing HorizontalLineInteractableDrawing({ required HorizontalDrawingToolConfig config, required this.startPoint, - }) : super(config: config); + }) : super(drawingConfig: config); /// Start point of the line. EdgePoint? startPoint; @@ -244,4 +247,13 @@ class HorizontalLineInteractableDrawing interactiveLayerBehaviour: layerBehaviour, interactableDrawing: this, ); + + @override + Widget buildToolBarMenu(UpdateDrawingTool onUpdate) => ColorSelector( + currentColor: config.lineStyle.color, + onColorChanged: (newcolor) { + onUpdate(config.copyWith( + lineStyle: config.lineStyle.copyWith(color: newcolor))); + }, + ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 10732b672..699dfdc09 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -25,17 +26,32 @@ import 'drawing_v2.dart'; abstract class InteractableDrawing implements DrawingV2 { /// Initializes [InteractableDrawing]. - InteractableDrawing({required this.config}); + InteractableDrawing({required T drawingConfig}) { + config = drawingConfig.copyWith() as T; + } @override String get id => config.configId ?? ''; /// The drawing tool config. - final T config; + late T config; /// Returns the updated config. T getUpdatedConfig(); + /// Returns the widget for the toolbar menu of the drawing tool. + /// [config] is the current configuration of the drawing tool. + Widget getToolBarMenu(UpdateDrawingTool onUpdate) { + final toolBar = buildToolBarMenu((config) { + this.config = config as T; + onUpdate(config); + }); + + return toolBar; + } + + Widget buildToolBarMenu(UpdateDrawingTool onUpdate); + /// Returns `true` if the drawing tool is hit by the given offset. @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 40ac8d96b..a793e1935 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; @@ -30,7 +31,7 @@ class TrendLineInteractableDrawing required LineDrawingToolConfig config, required this.startPoint, required this.endPoint, - }) : super(config: config); + }) : super(drawingConfig: config); // TODO(Ramin): make it non-nullable. /// Start point of the line. @@ -351,4 +352,9 @@ class TrendLineInteractableDrawing interactiveLayerBehaviour: layerBehaviour, interactableDrawing: this, ); + + @override + Widget buildToolBarMenu(UpdateDrawingTool onUpdate) { + throw UnimplementedError(); + } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 1501fab2c..1343059fa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -134,10 +134,8 @@ class _InteractiveLayerState extends State { } /// Updates the config in the repository with debouncing - void _updateConfigInRepository( - InteractableDrawing drawing, - ) { - final String? configId = drawing.config.configId; + void _updateConfigInRepository(DrawingToolConfig drawing) { + final String? configId = drawing.configId; if (configId == null) { return; @@ -158,22 +156,21 @@ class _InteractiveLayerState extends State { // Find the index of the config in the repository final int index = repo.items - .indexWhere((config) => config.configId == drawing.config.configId); + .indexWhere((config) => config.configId == drawing.configId); if (index == -1) { return; // Config not found } // Update the config in the repository - repo.updateAt(index, drawing.getUpdatedConfig()); + repo.updateAt(index, drawing); }); } - DrawingToolConfig _addDrawingToRepo( - InteractableDrawing drawing) { - final config = drawing - .getUpdatedConfig() - .copyWith(configId: DateTime.now().millisecondsSinceEpoch.toString()); + DrawingToolConfig _addDrawingToRepo(DrawingToolConfig drawing) { + final config = drawing.copyWith( + configId: DateTime.now().millisecondsSinceEpoch.toString(), + ); widget.drawingToolsRepo.add(config); @@ -233,9 +230,8 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { final InteractiveLayerBehaviour interactiveLayerBehaviour; - final Function(InteractableDrawing)? onSaveDrawingChange; - final DrawingToolConfig Function(InteractableDrawing) - onAddDrawing; + final Function(DrawingToolConfig)? onSaveDrawingChange; + final DrawingToolConfig Function(DrawingToolConfig) onAddDrawing; final DrawingToolConfig? addingDrawingTool; @@ -428,7 +424,8 @@ class _InteractiveLayerGestureHandlerState return controller.selectedDrawing != null ? SelectedDrawingFloatingMenu( drawing: controller.selectedDrawing!, - controller: widget.interactiveLayerBehaviour.controller, + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + onUpdateDrawing: saveDrawing, ) : const SizedBox.shrink(); }, @@ -458,12 +455,11 @@ class _InteractiveLayerGestureHandlerState void clearAddingDrawing() => widget.onClearAddingDrawingTool.call(); @override - DrawingToolConfig addDrawing( - InteractableDrawing drawing) => + DrawingToolConfig addDrawing(DrawingToolConfig drawing) => widget.onAddDrawing.call(drawing); @override - void saveDrawing(InteractableDrawing drawing) => + void saveDrawing(DrawingToolConfig drawing) => widget.onSaveDrawingChange?.call(drawing); @override diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 0f191d778..ff74bf396 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -47,9 +47,9 @@ abstract class InteractiveLayerBase { void clearAddingDrawing(); /// Adds the [drawing] to the interactive layer. - DrawingToolConfig addDrawing(InteractableDrawing drawing); + DrawingToolConfig addDrawing(DrawingToolConfig drawing); /// Save the drawings with the latest changes (positions or anything) to the /// repository. - void saveDrawing(InteractableDrawing drawing); + void saveDrawing(DrawingToolConfig drawing); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index b5251b6cf..381115f59 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -151,7 +151,7 @@ class InteractiveAddingToolState extends InteractiveState interactiveLayer ..clearAddingDrawing() - ..addDrawing(_drawingPreview!.interactableDrawing); + ..addDrawing(_drawingPreview!.interactableDrawing.getUpdatedConfig()); }); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 250a198de..7bc54861b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -70,7 +70,7 @@ class InteractiveSelectedToolState extends InteractiveState void onPanEnd(DragEndDetails details) { selected.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); _draggingStartedOnTool = false; - interactiveLayer.saveDrawing(selected); + interactiveLayer.saveDrawing(selected.getUpdatedConfig()); } @override diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 3dfeb52f5..410e6a9d9 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; @@ -6,6 +7,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:provider/provider.dart'; +import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; import '../interactive_layer_controller.dart'; /// A floating menu that appears when a drawing is selected. @@ -13,7 +15,8 @@ class SelectedDrawingFloatingMenu extends StatefulWidget { /// Creates a floating menu for the selected drawing. const SelectedDrawingFloatingMenu({ required this.drawing, - required this.controller, + required this.interactiveLayerBehaviour, + required this.onUpdateDrawing, super.key, }); @@ -21,7 +24,9 @@ class SelectedDrawingFloatingMenu extends StatefulWidget { final InteractableDrawing drawing; /// The controller for the interactive layer. - final InteractiveLayerController controller; + final InteractiveLayerBehaviour interactiveLayerBehaviour; + + final UpdateDrawingTool onUpdateDrawing; @override State createState() => @@ -33,9 +38,13 @@ class _SelectedDrawingFloatingMenuState // Store the menu size Size _menuSize = Size.zero; + late final InteractiveLayerController _controller; + @override void initState() { super.initState(); + _controller = widget.interactiveLayerBehaviour.controller; + // Schedule a post-frame callback to get the menu size WidgetsBinding.instance.addPostFrameCallback((_) { _updateMenuSize(); @@ -58,14 +67,13 @@ class _SelectedDrawingFloatingMenuState final screenSize = MediaQuery.of(context).size; return Positioned( - left: widget.controller.floatingMenuPosition.dx, - top: widget.controller.floatingMenuPosition.dy, + left: _controller.floatingMenuPosition.dx, + top: _controller.floatingMenuPosition.dy, child: GestureDetector( behavior: HitTestBehavior.opaque, onPanUpdate: (details) { // Calculate new position - final newPosition = - widget.controller.floatingMenuPosition + details.delta; + final newPosition = _controller.floatingMenuPosition + details.delta; // Update menu size if not already set if (_menuSize == Size.zero) { @@ -83,8 +91,7 @@ class _SelectedDrawingFloatingMenuState final constrainedY = newPosition.dy.clamp(0.0, parentSize.height - _menuSize.height); - widget.controller.floatingMenuPosition = - Offset(constrainedX, constrainedY); + _controller.floatingMenuPosition = Offset(constrainedX, constrainedY); setState(() {}); }, child: Container( @@ -96,7 +103,8 @@ class _SelectedDrawingFloatingMenuState children: [ Icon(Icons.delete_outline, color: context.watch().gridTextColor), - Text(widget.drawing.runtimeType.toString()) + Text(widget.drawing.runtimeType.toString()), + widget.drawing.getToolBarMenu(widget.onUpdateDrawing) ], ), ), From cc196dee3c26f09f69091424179416cb73299c2d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 3 Jun 2025 17:12:20 +0800 Subject: [PATCH 219/311] fix: drawing tools change not being applied --- .../interactable_drawings/interactable_drawing.dart | 9 ++++++++- .../deriv_chart/interactive_layer/interactive_layer.dart | 6 +++++- .../widgets/selected_drawing_floating_menu.dart | 6 +++++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 699dfdc09..bcfb39780 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -28,6 +28,7 @@ abstract class InteractableDrawing /// Initializes [InteractableDrawing]. InteractableDrawing({required T drawingConfig}) { config = drawingConfig.copyWith() as T; + prevConfig = config.copyWith() as T; } @override @@ -35,6 +36,7 @@ abstract class InteractableDrawing /// The drawing tool config. late T config; + late T prevConfig; /// Returns the updated config. T getUpdatedConfig(); @@ -43,7 +45,9 @@ abstract class InteractableDrawing /// [config] is the current configuration of the drawing tool. Widget getToolBarMenu(UpdateDrawingTool onUpdate) { final toolBar = buildToolBarMenu((config) { + prevConfig = this.config; this.config = config as T; + onUpdate(config); }); @@ -122,7 +126,10 @@ abstract class InteractableDrawing Set drawingState, covariant InteractableDrawing oldDrawing, ) { - return config != oldDrawing.config || + final configChanged = config != prevConfig; + prevConfig = config; + + return configChanged || drawingState.contains(DrawingToolState.dragging) || drawingState.contains(DrawingToolState.adding) || drawingState.contains(DrawingToolState.animating); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 1343059fa..d9e9f2774 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -355,7 +355,11 @@ class _InteractiveLayerGestureHandlerState Widget _buildDrawingsLayer(BuildContext context, XAxisModel xAxis) => RepaintBoundary( child: MultipleAnimatedBuilder( - animations: [_stateChangeController, _interactionNotifier], + animations: [ + _stateChangeController, + _interactionNotifier, + widget.interactiveLayerBehaviour.controller + ], builder: (_, __) { final double animationValue = _stateChangeCurve.transform(_stateChangeController.value); diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 410e6a9d9..1e15ebaed 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -104,7 +104,11 @@ class _SelectedDrawingFloatingMenuState Icon(Icons.delete_outline, color: context.watch().gridTextColor), Text(widget.drawing.runtimeType.toString()), - widget.drawing.getToolBarMenu(widget.onUpdateDrawing) + widget.drawing.getToolBarMenu((newConfig) { + widget.onUpdateDrawing(newConfig); + widget.interactiveLayerBehaviour.controller.selectedDrawing = + widget.drawing; + }) ], ), ), From c13dc81307f771d6b9a18b062d27c4ba64ecaa91 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Tue, 3 Jun 2025 17:30:44 +0800 Subject: [PATCH 220/311] chore: code cleanup: --- .../interactable_drawing.dart | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index bcfb39780..996182c83 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -28,7 +28,7 @@ abstract class InteractableDrawing /// Initializes [InteractableDrawing]. InteractableDrawing({required T drawingConfig}) { config = drawingConfig.copyWith() as T; - prevConfig = config.copyWith() as T; + _prevConfig = config.copyWith() as T; } @override @@ -36,7 +36,13 @@ abstract class InteractableDrawing /// The drawing tool config. late T config; - late T prevConfig; + + /// The previous drawing tool config. + /// + /// Whenever there is a change in the internal [config] this will be hold the + /// previous state of the config before change. so it can be used in the + /// config comparisons. + late T _prevConfig; /// Returns the updated config. T getUpdatedConfig(); @@ -45,7 +51,7 @@ abstract class InteractableDrawing /// [config] is the current configuration of the drawing tool. Widget getToolBarMenu(UpdateDrawingTool onUpdate) { final toolBar = buildToolBarMenu((config) { - prevConfig = this.config; + _prevConfig = this.config; this.config = config as T; onUpdate(config); @@ -54,6 +60,7 @@ abstract class InteractableDrawing return toolBar; } + /// Builds the toolbar menu for the drawing tool. Widget buildToolBarMenu(UpdateDrawingTool onUpdate); /// Returns `true` if the drawing tool is hit by the given offset. @@ -126,8 +133,8 @@ abstract class InteractableDrawing Set drawingState, covariant InteractableDrawing oldDrawing, ) { - final configChanged = config != prevConfig; - prevConfig = config; + final configChanged = config != _prevConfig; + _prevConfig = config; return configChanged || drawingState.contains(DrawingToolState.dragging) || From 99657e72d1796e3ae5e02eefd3fa9acfe2d6d8b1 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 4 Jun 2025 16:19:20 +0800 Subject: [PATCH 221/311] delete drawing when floating menu delete button is tapped --- lib/src/add_ons/add_ons_repository.dart | 8 ++++ lib/src/add_ons/repository.dart | 3 ++ .../horizontal_line_interactable_drawing.dart | 2 +- .../interactable_drawing.dart | 9 +++-- .../trend_line_interactable_drawing.dart | 2 +- .../interactive_layer/interactive_layer.dart | 9 +++++ .../interactive_layer_base.dart | 3 ++ .../selected_drawing_floating_menu.dart | 37 ++++++++++++++----- 8 files changed, 59 insertions(+), 14 deletions(-) diff --git a/lib/src/add_ons/add_ons_repository.dart b/lib/src/add_ons/add_ons_repository.dart index 33596455a..6fc50a480 100644 --- a/lib/src/add_ons/add_ons_repository.dart +++ b/lib/src/add_ons/add_ons_repository.dart @@ -117,6 +117,14 @@ class AddOnsRepository extends ChangeNotifier notifyListeners(); } + @override + void remove(T config) { + final index = items.indexOf(config); + if (index != -1) { + removeAt(index); + } + } + /// Removes all indicator/drawing tool from repository and /// updates storage. @override diff --git a/lib/src/add_ons/repository.dart b/lib/src/add_ons/repository.dart index 7b3c8920a..68a8c4e4d 100644 --- a/lib/src/add_ons/repository.dart +++ b/lib/src/add_ons/repository.dart @@ -23,6 +23,9 @@ abstract class Repository extends ChangeNotifier { /// Removes indicator or drawing tool at [index]. void removeAt(int index); + /// Removes a specific indicator or drawing tool from the repository. + void remove(T config); + /// Swaps two elements of a list. void swap(int index1, int index2); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 0023c56df..61e7997fe 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -249,7 +249,7 @@ class HorizontalLineInteractableDrawing ); @override - Widget buildToolBarMenu(UpdateDrawingTool onUpdate) => ColorSelector( + Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => ColorSelector( currentColor: config.lineStyle.color, onColorChanged: (newcolor) { onUpdate(config.copyWith( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 996182c83..dbaae9140 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -49,8 +49,10 @@ abstract class InteractableDrawing /// Returns the widget for the toolbar menu of the drawing tool. /// [config] is the current configuration of the drawing tool. - Widget getToolBarMenu(UpdateDrawingTool onUpdate) { - final toolBar = buildToolBarMenu((config) { + Widget getToolBarMenu({ + required UpdateDrawingTool onUpdate, + }) { + final toolBar = buildDrawingToolBarMenu((config) { _prevConfig = this.config; this.config = config as T; @@ -61,7 +63,8 @@ abstract class InteractableDrawing } /// Builds the toolbar menu for the drawing tool. - Widget buildToolBarMenu(UpdateDrawingTool onUpdate); + @protected + Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate); /// Returns `true` if the drawing tool is hit by the given offset. @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 7661e39a8..ad20a01c6 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -357,7 +357,7 @@ class TrendLineInteractableDrawing ); @override - Widget buildToolBarMenu(UpdateDrawingTool onUpdate) { + Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) { throw UnimplementedError(); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index d9e9f2774..f7d0536b1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -205,6 +205,7 @@ class _InteractiveLayerState extends State { onClearAddingDrawingTool: widget.drawingTools.clearDrawingToolSelection, onSaveDrawingChange: _updateConfigInRepository, onAddDrawing: _addDrawingToRepo, + onRemoveDrawing: widget.drawingToolsRepo.remove, ); } } @@ -224,6 +225,7 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { required this.interactiveLayerBehaviour, this.addingDrawingTool, this.onSaveDrawingChange, + this.onRemoveDrawing, }); final List drawings; @@ -231,6 +233,8 @@ class _InteractiveLayerGestureHandler extends StatefulWidget { final InteractiveLayerBehaviour interactiveLayerBehaviour; final Function(DrawingToolConfig)? onSaveDrawingChange; + final Function(DrawingToolConfig)? onRemoveDrawing; + final DrawingToolConfig Function(DrawingToolConfig) onAddDrawing; final DrawingToolConfig? addingDrawingTool; @@ -430,6 +434,7 @@ class _InteractiveLayerGestureHandlerState drawing: controller.selectedDrawing!, interactiveLayerBehaviour: widget.interactiveLayerBehaviour, onUpdateDrawing: saveDrawing, + onRemoveDrawing: removeDrawing, ) : const SizedBox.shrink(); }, @@ -466,6 +471,10 @@ class _InteractiveLayerGestureHandlerState void saveDrawing(DrawingToolConfig drawing) => widget.onSaveDrawingChange?.call(drawing); + @override + void removeDrawing(DrawingToolConfig drawing) => + widget.onRemoveDrawing?.call(drawing); + @override Size? get layerSize => _size; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index ff74bf396..1d7c11647 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -52,4 +52,7 @@ abstract class InteractiveLayerBase { /// Save the drawings with the latest changes (positions or anything) to the /// repository. void saveDrawing(DrawingToolConfig drawing); + + /// Removes the [drawing] from the interactive layer and the chart. + void removeDrawing(DrawingToolConfig drawing); } diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 1e15ebaed..53d92c15d 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -1,10 +1,10 @@ +import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/state_change_direction.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/widgets.dart'; import 'package:provider/provider.dart'; import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; @@ -17,6 +17,7 @@ class SelectedDrawingFloatingMenu extends StatefulWidget { required this.drawing, required this.interactiveLayerBehaviour, required this.onUpdateDrawing, + required this.onRemoveDrawing, super.key, }); @@ -26,8 +27,12 @@ class SelectedDrawingFloatingMenu extends StatefulWidget { /// The controller for the interactive layer. final InteractiveLayerBehaviour interactiveLayerBehaviour; + /// Callback to update the drawing. final UpdateDrawingTool onUpdateDrawing; + /// Callback to remove the drawing. + final UpdateDrawingTool onRemoveDrawing; + @override State createState() => _SelectedDrawingFloatingMenuState(); @@ -101,14 +106,28 @@ class _SelectedDrawingFloatingMenuState ), child: Row( children: [ - Icon(Icons.delete_outline, - color: context.watch().gridTextColor), + IconButton( + icon: const Icon(Icons.delete_outline), + color: context.watch().gridTextColor, + onPressed: () { + widget.onRemoveDrawing(widget.drawing.config); + widget.interactiveLayerBehaviour.updateStateTo( + InteractiveNormalState( + interactiveLayerBehaviour: + widget.interactiveLayerBehaviour, + ), + StateChangeAnimationDirection.backward, + ); + }, + ), Text(widget.drawing.runtimeType.toString()), - widget.drawing.getToolBarMenu((newConfig) { - widget.onUpdateDrawing(newConfig); - widget.interactiveLayerBehaviour.controller.selectedDrawing = - widget.drawing; - }) + widget.drawing.getToolBarMenu( + onUpdate: (config) { + widget.onUpdateDrawing(config); + widget.interactiveLayerBehaviour.controller.selectedDrawing = + widget.drawing; + }, + ), ], ), ), From f732a80230a1fe5c0f85b02525a5dfb60ab336fa Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 4 Jun 2025 16:26:00 +0800 Subject: [PATCH 222/311] code cleanup :recycle: --- .../selected_drawing_floating_menu.dart | 53 ++++++++++--------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 53d92c15d..d56c9a4a9 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -1,4 +1,3 @@ -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/state_change_direction.dart'; @@ -9,6 +8,7 @@ import 'package:provider/provider.dart'; import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; import '../interactive_layer_controller.dart'; +import '../interactive_layer_states/interactive_normal_state.dart'; /// A floating menu that appears when a drawing is selected. class SelectedDrawingFloatingMenu extends StatefulWidget { @@ -105,33 +105,38 @@ class _SelectedDrawingFloatingMenuState borderRadius: BorderRadius.circular(8), ), child: Row( - children: [ - IconButton( - icon: const Icon(Icons.delete_outline), - color: context.watch().gridTextColor, - onPressed: () { - widget.onRemoveDrawing(widget.drawing.config); - widget.interactiveLayerBehaviour.updateStateTo( - InteractiveNormalState( - interactiveLayerBehaviour: - widget.interactiveLayerBehaviour, - ), - StateChangeAnimationDirection.backward, - ); - }, - ), - Text(widget.drawing.runtimeType.toString()), - widget.drawing.getToolBarMenu( - onUpdate: (config) { - widget.onUpdateDrawing(config); - widget.interactiveLayerBehaviour.controller.selectedDrawing = - widget.drawing; - }, - ), + children: [ + _buildRemoveButton(context), + _buildTitle(), + _buildDrawingMenuOptions(), ], ), ), ), ); } + + Widget _buildDrawingMenuOptions() => widget.drawing.getToolBarMenu( + onUpdate: (config) { + widget.onUpdateDrawing(config); + widget.interactiveLayerBehaviour.controller.selectedDrawing = + widget.drawing; + }, + ); + + Widget _buildTitle() => Text(widget.drawing.runtimeType.toString()); + + Widget _buildRemoveButton(BuildContext context) => IconButton( + icon: const Icon(Icons.delete_outline), + color: context.watch().gridTextColor, + onPressed: () { + widget.onRemoveDrawing(widget.drawing.config); + widget.interactiveLayerBehaviour.updateStateTo( + InteractiveNormalState( + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + ), + StateChangeAnimationDirection.backward, + ); + }, + ); } From 777886da2e28738abf0bf977f7e1d428220fd16f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 4 Jun 2025 17:04:27 +0800 Subject: [PATCH 223/311] refactor: move showing floating menu to selected state --- .../horizontal_line_interactable_drawing.dart | 9 +++--- .../interactive_layer/interactive_layer.dart | 21 ++------------ .../interactive_layer_behaviour.dart | 5 ++++ .../interactive_selected_tool_state.dart | 29 +++++++++++++++++++ .../interactive_state.dart | 4 +++ .../selected_drawing_floating_menu.dart | 18 ++---------- 6 files changed, 47 insertions(+), 39 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 61e7997fe..0df3cc7a0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -251,9 +251,10 @@ class HorizontalLineInteractableDrawing @override Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => ColorSelector( currentColor: config.lineStyle.color, - onColorChanged: (newcolor) { - onUpdate(config.copyWith( - lineStyle: config.lineStyle.copyWith(color: newcolor))); - }, + onColorChanged: (Color newColor) => onUpdate( + config.copyWith( + lineStyle: config.lineStyle.copyWith(color: newColor), + ), + ), ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index f7d0536b1..8f5d4fc84 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -24,7 +24,6 @@ import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; import 'enums/state_change_direction.dart'; import 'interactive_layer_behaviours/interactive_layer_behaviour.dart'; -import 'widgets/selected_drawing_floating_menu.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. @@ -94,7 +93,7 @@ class _InteractiveLayerState extends State { final Map _debounceTimers = {}; /// Duration for debouncing repository updates (1-sec is a good balance) - static const Duration _debounceDuration = Duration(seconds: 1); + static const Duration _debounceDuration = Duration(milliseconds: 500); @override void initState() { @@ -348,7 +347,6 @@ class _InteractiveLayerGestureHandlerState child: Stack( children: [ _buildDrawingsLayer(context, xAxis), - _buildSelectedDrawingFloatingMenu(), ], ), ), @@ -389,6 +387,7 @@ class _InteractiveLayerGestureHandlerState animationValue, )) .toList(), + ...widget.interactiveLayerBehaviour.previewWidgets ], ); }), @@ -424,22 +423,6 @@ class _InteractiveLayerGestureHandlerState ), ); - Widget _buildSelectedDrawingFloatingMenu() => ListenableBuilder( - listenable: widget.interactiveLayerBehaviour.controller, - builder: (_, __) { - final controller = widget.interactiveLayerBehaviour.controller; - - return controller.selectedDrawing != null - ? SelectedDrawingFloatingMenu( - drawing: controller.selectedDrawing!, - interactiveLayerBehaviour: widget.interactiveLayerBehaviour, - onUpdateDrawing: saveDrawing, - onRemoveDrawing: removeDrawing, - ) - : const SizedBox.shrink(); - }, - ); - void onTap(TapUpDetails details) { widget.interactiveLayerBehaviour.onTap(details); _interactionNotifier.notify(); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index a7fa30340..5034bb292 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dar import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:flutter/gestures.dart'; +import 'package:flutter/widgets.dart'; import '../enums/drawing_tool_state.dart'; import '../enums/state_change_direction.dart'; @@ -111,6 +112,10 @@ abstract class InteractiveLayerBehaviour { /// the user is interacting with [InteractiveLayerBase]. List get previewDrawings => currentState.previewDrawings; + /// The extra widgets that the current interactive state can show on top of + /// interactive layer. + List get previewWidgets => currentState.previewWidgets; + /// Handles tap event. void onTap(TapUpDetails details) => currentState.onTap(details); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index dc02faad1..9adf7a640 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -8,6 +8,7 @@ import '../interactable_drawings/interactable_drawing.dart'; import '../interactive_layer_states/interactive_state.dart'; import '../enums/drawing_tool_state.dart'; import '../enums/state_change_direction.dart'; +import '../widgets/selected_drawing_floating_menu.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; @@ -134,4 +135,32 @@ class InteractiveSelectedToolState extends InteractiveState ); } } + + @override + List get previewWidgets => [_buildSelectedDrawingFloatingMenu()]; + + Widget _buildSelectedDrawingFloatingMenu() => ListenableBuilder( + listenable: interactiveLayerBehaviour.controller, + builder: (_, __) => SelectedDrawingFloatingMenu( + drawing: selected, + interactiveLayerBehaviour: interactiveLayerBehaviour, + onUpdateDrawing: (config) { + interactiveLayer.saveDrawing(config); + interactiveLayerBehaviour.updateStateTo( + this, + StateChangeAnimationDirection.forward, + ); + }, + onRemoveDrawing: (config) { + interactiveLayer.removeDrawing(config); + + interactiveLayerBehaviour.updateStateTo( + InteractiveNormalState( + interactiveLayerBehaviour: interactiveLayerBehaviour, + ), + StateChangeAnimationDirection.backward, + ); + }, + ), + ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart index 29dbe11a1..0a7d660f0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_state.dart @@ -1,6 +1,7 @@ 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:flutter/gestures.dart'; +import 'package:flutter/widgets.dart'; import '../enums/drawing_tool_state.dart'; import '../interactable_drawings/drawing_v2.dart'; @@ -48,6 +49,9 @@ abstract class InteractiveState { /// render on top of the main drawings. List get previewDrawings => []; + /// Additional widgets to be rendered on top of the interactive layer. + List get previewWidgets => []; + /// The interactive layer. /// /// A reference to the layer that owns this state, allowing the state to diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index d56c9a4a9..c42bd5933 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -1,6 +1,5 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/enums/state_change_direction.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/material.dart'; @@ -8,7 +7,6 @@ import 'package:provider/provider.dart'; import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; import '../interactive_layer_controller.dart'; -import '../interactive_layer_states/interactive_normal_state.dart'; /// A floating menu that appears when a drawing is selected. class SelectedDrawingFloatingMenu extends StatefulWidget { @@ -117,11 +115,7 @@ class _SelectedDrawingFloatingMenuState } Widget _buildDrawingMenuOptions() => widget.drawing.getToolBarMenu( - onUpdate: (config) { - widget.onUpdateDrawing(config); - widget.interactiveLayerBehaviour.controller.selectedDrawing = - widget.drawing; - }, + onUpdate: widget.onUpdateDrawing, ); Widget _buildTitle() => Text(widget.drawing.runtimeType.toString()); @@ -129,14 +123,6 @@ class _SelectedDrawingFloatingMenuState Widget _buildRemoveButton(BuildContext context) => IconButton( icon: const Icon(Icons.delete_outline), color: context.watch().gridTextColor, - onPressed: () { - widget.onRemoveDrawing(widget.drawing.config); - widget.interactiveLayerBehaviour.updateStateTo( - InteractiveNormalState( - interactiveLayerBehaviour: widget.interactiveLayerBehaviour, - ), - StateChangeAnimationDirection.backward, - ); - }, + onPressed: () => widget.onRemoveDrawing(widget.drawing.config), ); } From 8837fceab60be2b40267cbbf2dfa78367ac2c458 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 4 Jun 2025 17:12:24 +0800 Subject: [PATCH 224/311] remove dependency to controller in floating menu widget --- .../interactive_selected_tool_state.dart | 43 +++++++++---------- 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 9adf7a640..47572b843 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -139,28 +139,25 @@ class InteractiveSelectedToolState extends InteractiveState @override List get previewWidgets => [_buildSelectedDrawingFloatingMenu()]; - Widget _buildSelectedDrawingFloatingMenu() => ListenableBuilder( - listenable: interactiveLayerBehaviour.controller, - builder: (_, __) => SelectedDrawingFloatingMenu( - drawing: selected, - interactiveLayerBehaviour: interactiveLayerBehaviour, - onUpdateDrawing: (config) { - interactiveLayer.saveDrawing(config); - interactiveLayerBehaviour.updateStateTo( - this, - StateChangeAnimationDirection.forward, - ); - }, - onRemoveDrawing: (config) { - interactiveLayer.removeDrawing(config); - - interactiveLayerBehaviour.updateStateTo( - InteractiveNormalState( - interactiveLayerBehaviour: interactiveLayerBehaviour, - ), - StateChangeAnimationDirection.backward, - ); - }, - ), + Widget _buildSelectedDrawingFloatingMenu() => SelectedDrawingFloatingMenu( + drawing: selected, + interactiveLayerBehaviour: interactiveLayerBehaviour, + onUpdateDrawing: (config) { + interactiveLayer.saveDrawing(config); + interactiveLayerBehaviour.updateStateTo( + this, + StateChangeAnimationDirection.forward, + ); + }, + onRemoveDrawing: (config) { + interactiveLayer.removeDrawing(config); + + interactiveLayerBehaviour.updateStateTo( + InteractiveNormalState( + interactiveLayerBehaviour: interactiveLayerBehaviour, + ), + StateChangeAnimationDirection.backward, + ); + }, ); } From d6161c9b5161d46ab588b574038afcd61bee2d4d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 4 Jun 2025 17:39:50 +0800 Subject: [PATCH 225/311] avoid reanimating if the drawing tools is already selected --- .../interactive_layer_behaviour.dart | 27 +++++++++++-------- .../interactive_selected_tool_state.dart | 2 ++ 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 5034bb292..e7ef8f5fa 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -74,22 +74,27 @@ abstract class InteractiveLayerBehaviour { /// /// Calls [onUpdate] callback to notify the interactive layer to update its /// UI after the state change. + /// + /// [waitForAnimation] + /// If set to `true`, the method will wait for the state change animation. + /// If set to `false`, it will not wait for the animation to complete. + /// If `null` will not play animation for state change. Future updateStateTo( InteractiveState newState, StateChangeAnimationDirection direction, { - bool waitForAnimation = false, + bool waitForAnimation = true, + bool animate = true, }) async { - if (waitForAnimation) { - await interactiveLayer.animateStateChange(direction); - - _controller.currentState = newState; - onUpdate(); - } else { - unawaited(interactiveLayer.animateStateChange(direction)); - - _controller.currentState = newState; - onUpdate(); + if (animate) { + if (waitForAnimation) { + await interactiveLayer.animateStateChange(direction); + } else { + unawaited(interactiveLayer.animateStateChange(direction)); + } } + + _controller.currentState = newState; + onUpdate(); } /// Handles the addition of a drawing tool. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 47572b843..601c79a7f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -147,6 +147,7 @@ class InteractiveSelectedToolState extends InteractiveState interactiveLayerBehaviour.updateStateTo( this, StateChangeAnimationDirection.forward, + animate: false, ); }, onRemoveDrawing: (config) { @@ -157,6 +158,7 @@ class InteractiveSelectedToolState extends InteractiveState interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.backward, + waitForAnimation: false, ); }, ); From d6b8f03bf60e12ad99c068fd37e655d5e516258b Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 4 Jun 2025 17:55:57 +0800 Subject: [PATCH 226/311] endup in selected state after a tool is added --- .../interactive_adding_tool_state.dart | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 381115f59..db03932d6 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -1,3 +1,4 @@ +import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:flutter/gestures.dart'; @@ -143,7 +144,8 @@ class InteractiveAddingToolState extends InteractiveState _drawingPreview! .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { interactiveLayerBehaviour.updateStateTo( - InteractiveNormalState( + InteractiveSelectedToolState( + selected: _drawingPreview!.interactableDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, From f231abdc9ebf099516b3464e3bb576a5c640281a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 09:47:47 +0800 Subject: [PATCH 227/311] preview line on desktop based on design --- ...orizontal_line_adding_preview_desktop.dart | 38 +++++++++++++++++-- ...horizontal_line_adding_preview_mobile.dart | 5 +-- 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index 70fe9527f..f79088fe4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -8,6 +8,7 @@ import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; +import '../../helpers/paint_helpers.dart'; import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; @@ -49,9 +50,15 @@ class HorizontalLineAddingPreviewDesktop GetDrawingState drawingState, ) { if (_hoverPosition != null) { - canvas.drawLine( - Offset(0, _hoverPosition!.dy), - Offset(size.width, _hoverPosition!.dy), + final double lineY = _hoverPosition!.dy; + + final Path horizontalPath = Path() + ..moveTo(0, lineY) + ..lineTo(size.width, lineY); + + canvas.drawPath( + dashPath(horizontalPath, + dashArray: CircularIntervalList([2, 2])), Paint() ..color = interactableDrawing.config.lineStyle.color ..style = PaintingStyle.stroke, @@ -59,6 +66,31 @@ class HorizontalLineAddingPreviewDesktop } } + @override + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { + if (_hoverPosition != null) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: interactiveLayerBehaviour.interactiveLayer + .quoteFromY(_hoverPosition!.dy), + pipSize: chartConfig.pipSize, + size: size, + color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + } + @override void onCreateTap( TapUpDetails details, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index 7fb4fff6f..cb39cbac6 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -1,14 +1,13 @@ import 'dart:ui'; -import 'package:deriv_chart/deriv_chart.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/edge_point.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; - import '../../interactable_drawing_custom_painter.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; @@ -84,7 +83,7 @@ class HorizontalLineAddingPreviewMobile canvas.drawPath( dashPath(horizontalPath, - dashArray: CircularIntervalList([5, 5])), + dashArray: CircularIntervalList([2, 2])), Paint() ..color = interactableDrawing.config.lineStyle.color ..style = PaintingStyle.stroke, From c1d9a56fdb012dfb713613ceaf7e4b81102cd5b4 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 10:14:13 +0800 Subject: [PATCH 228/311] add labelStyle to config --- .../horizontal_drawing_tool_config.dart | 5 +++++ .../interactive_layer/helpers/paint_helpers.dart | 16 ++++++++++------ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index 21da2c50d..91ede63fc 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:deriv_chart/src/theme/text_styles.dart'; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; @@ -22,6 +23,7 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { DrawingData? drawingData, List edgePoints = const [], this.lineStyle = const LineStyle(thickness: 0.9, color: Colors.white), + this.labelStyle = TextStyles.currentSpotTextStyle, this.pattern = DrawingPatterns.solid, this.enableLabel = true, super.number, @@ -45,6 +47,9 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { /// Drawing tool line style final LineStyle lineStyle; + /// The style of the label showing on y-axis when the tools is selected. + final TextStyle labelStyle; + /// Drawing tool line pattern: 'solid', 'dotted', 'dashed' final DrawingPatterns pattern; diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index c9cc87477..a3c63ca3d 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -222,15 +222,19 @@ void drawValueLabel({ } /// Returns a [TextPainter] for the given formatted value and color. -TextPainter _getTextPainter(String formattedValue, Color color) { +TextPainter _getTextPainter( + String formattedValue, + Color color, { + TextStyle textStyle = const TextStyle( + color: Colors.white38, + fontSize: 14, + fontWeight: FontWeight.normal, + ), +}) { final TextPainter textPainter = TextPainter( text: TextSpan( text: formattedValue, - style: TextStyle( - color: color, - fontSize: 14, - fontWeight: FontWeight.normal, - ), + style: textStyle, ), textDirection: TextDirection.ltr, textAlign: TextAlign.center, From 00960e70fe564a20609f818db7bcf393de84b17c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 10:37:05 +0800 Subject: [PATCH 229/311] generate toJson/fromJson for labelStyle --- .../horizontal_drawing_tool_config.dart | 4 + .../horizontal_drawing_tool_config.g.dart | 5 + .../helpers/text_style_json_converter.dart | 92 +++++++++++++++++++ pubspec.yaml | 3 + 4 files changed, 104 insertions(+) create mode 100644 lib/src/deriv_chart/chart/helpers/text_style_json_converter.dart diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index 91ede63fc..6c47c4d61 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -4,6 +4,7 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_item.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/text_style_json_converter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:deriv_chart/src/theme/text_styles.dart'; @@ -48,6 +49,7 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { final LineStyle lineStyle; /// The style of the label showing on y-axis when the tools is selected. + @TextStyleJsonConverter() final TextStyle labelStyle; /// Drawing tool line pattern: 'solid', 'dotted', 'dashed' @@ -73,6 +75,7 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { DrawingData? drawingData, LineStyle? lineStyle, LineStyle? fillStyle, + TextStyle? labelStyle, DrawingPatterns? pattern, List? edgePoints, bool? enableLabel, @@ -82,6 +85,7 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { configId: configId ?? this.configId, drawingData: drawingData ?? this.drawingData, lineStyle: lineStyle ?? this.lineStyle, + labelStyle: labelStyle ?? this.labelStyle, pattern: pattern ?? this.pattern, edgePoints: edgePoints ?? this.edgePoints, enableLabel: enableLabel ?? this.enableLabel, diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.g.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.g.dart index 9560dd135..076202084 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.g.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.g.dart @@ -20,6 +20,10 @@ HorizontalDrawingToolConfig _$HorizontalDrawingToolConfigFromJson( lineStyle: json['lineStyle'] == null ? const LineStyle(thickness: 0.9, color: Colors.white) : LineStyle.fromJson(json['lineStyle'] as Map), + labelStyle: json['labelStyle'] == null + ? TextStyles.currentSpotTextStyle + : const TextStyleJsonConverter() + .fromJson(json['labelStyle'] as Map), pattern: $enumDecodeNullable(_$DrawingPatternsEnumMap, json['pattern']) ?? DrawingPatterns.solid, enableLabel: json['enableLabel'] as bool? ?? true, @@ -34,6 +38,7 @@ Map _$HorizontalDrawingToolConfigToJson( 'edgePoints': instance.edgePoints, 'configId': instance.configId, 'lineStyle': instance.lineStyle, + 'labelStyle': const TextStyleJsonConverter().toJson(instance.labelStyle), 'pattern': _$DrawingPatternsEnumMap[instance.pattern]!, 'enableLabel': instance.enableLabel, }; diff --git a/lib/src/deriv_chart/chart/helpers/text_style_json_converter.dart b/lib/src/deriv_chart/chart/helpers/text_style_json_converter.dart new file mode 100644 index 000000000..1bd84adac --- /dev/null +++ b/lib/src/deriv_chart/chart/helpers/text_style_json_converter.dart @@ -0,0 +1,92 @@ +import 'package:flutter/painting.dart'; +import 'package:json_annotation/json_annotation.dart'; + +/// JsonConverter for TextStyle +class TextStyleJsonConverter + implements JsonConverter> { + /// Constructor + const TextStyleJsonConverter(); + + @override + TextStyle fromJson(Map json) { + return TextStyle( + color: json['color'] != null ? Color(json['color'] as int) : null, + fontSize: json['fontSize'] as double?, + fontWeight: json['fontWeight'] != null + ? FontWeight.values[json['fontWeight'] as int] + : null, + fontStyle: json['fontStyle'] != null + ? FontStyle.values[json['fontStyle'] as int] + : null, + letterSpacing: json['letterSpacing'] as double?, + wordSpacing: json['wordSpacing'] as double?, + height: json['height'] as double?, + decoration: json['decoration'] != null + ? _getTextDecorationFromInt(json['decoration'] as int) + : null, + decorationColor: json['decorationColor'] != null + ? Color(json['decorationColor'] as int) + : null, + decorationStyle: json['decorationStyle'] != null + ? TextDecorationStyle.values[json['decorationStyle'] as int] + : null, + decorationThickness: json['decorationThickness'] as double?, + ); + } + + @override + Map toJson(TextStyle textStyle) { + return { + if (textStyle.color != null) 'color': textStyle.color!.value, + if (textStyle.fontSize != null) 'fontSize': textStyle.fontSize, + if (textStyle.fontWeight != null) + 'fontWeight': textStyle.fontWeight!.index, + if (textStyle.fontStyle != null) 'fontStyle': textStyle.fontStyle!.index, + if (textStyle.letterSpacing != null) + 'letterSpacing': textStyle.letterSpacing, + if (textStyle.wordSpacing != null) 'wordSpacing': textStyle.wordSpacing, + if (textStyle.height != null) 'height': textStyle.height, + if (textStyle.decoration != null) + 'decoration': _getIntFromTextDecoration(textStyle.decoration!), + if (textStyle.decorationColor != null) + 'decorationColor': textStyle.decorationColor!.value, + if (textStyle.decorationStyle != null) + 'decorationStyle': textStyle.decorationStyle!.index, + if (textStyle.decorationThickness != null) + 'decorationThickness': textStyle.decorationThickness, + }; + } + + /// Convert int to TextDecoration + TextDecoration _getTextDecorationFromInt(int value) { + switch (value) { + case 0: + return TextDecoration.none; + case 1: + return TextDecoration.underline; + case 2: + return TextDecoration.overline; + case 3: + return TextDecoration.lineThrough; + default: + return TextDecoration.none; + } + } + + /// Convert TextDecoration to int + int _getIntFromTextDecoration(TextDecoration decoration) { + if (decoration == TextDecoration.none) { + return 0; + } + if (decoration == TextDecoration.underline) { + return 1; + } + if (decoration == TextDecoration.overline) { + return 2; + } + if (decoration == TextDecoration.lineThrough) { + return 3; + } + return 0; + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 2e35ad16a..0739eaafd 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -23,6 +23,9 @@ dependencies: shared_preferences: ^2.1.0 meta: ^1.15.0 +dependency_overrides: + dart_style: ^2.3.4 + dev_dependencies: flutter_test: sdk: flutter From c848fd25bf95f4321eb94f0106e83c05019285e4 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 10:47:53 +0800 Subject: [PATCH 230/311] pass labelStyle to draw label function --- .../adx/adx_indicator_config.g.dart | 8 ++++---- .../alligator/alligator_indicator_config.g.dart | 16 ++++++++-------- .../aroon/aroon_indicator_config.g.dart | 6 +++--- .../awesome_oscillator_indicator_config.g.dart | 4 ++-- .../bollinger_bands_indicator_config.g.dart | 6 +++--- .../cci_indicator_config.g.dart | 6 +++--- .../donchian_channel_indicator_config.g.dart | 10 +++++----- .../dpo_indicator/dpo_indicator_config.g.dart | 8 ++++---- .../fcb_indicator/fcb_indicator_config.g.dart | 6 +++--- .../gator/gator_indicator_config.g.dart | 16 ++++++++-------- .../ichimoku_cloud_indicator_config.g.dart | 11 ++++++----- .../ma_env_indicator_config.g.dart | 6 +++--- .../ma_indicator/ma_indicator_config.g.dart | 10 +++++----- .../macd_indicator/macd_indicator_config.g.dart | 12 ++++++------ .../parabolic_sar_indicator_config.g.dart | 2 +- .../rainbow_indicator_config.g.dart | 6 ++++-- .../roc/roc_indicator_config.g.dart | 6 +++--- .../rsi/rsi_indicator_config.g.dart | 8 ++++---- .../smi/smi_indicator_config.g.dart | 13 +++++++------ ...stochastic_oscillator_indicator_config.g.dart | 6 +++--- .../williams_r_indicator_config.g.dart | 6 +++--- .../zigzag_indicator_config.g.dart | 2 +- .../interactive_layer/helpers/paint_helpers.dart | 5 +++-- .../horizontal_line_adding_preview_desktop.dart | 1 + .../horizontal_line_adding_preview_mobile.dart | 1 + .../horizontal_line_interactable_drawing.dart | 1 + .../interactive_layer_controller.dart | 1 + 27 files changed, 96 insertions(+), 87 deletions(-) diff --git a/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart index ae57adcc3..90aacd710 100644 --- a/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart @@ -8,8 +8,8 @@ part of 'adx_indicator_config.dart'; ADXIndicatorConfig _$ADXIndicatorConfigFromJson(Map json) => ADXIndicatorConfig( - period: json['period'] as int? ?? 14, - smoothingPeriod: json['smoothingPeriod'] as int? ?? 14, + period: (json['period'] as num?)?.toInt() ?? 14, + smoothingPeriod: (json['smoothingPeriod'] as num?)?.toInt() ?? 14, showSeries: json['showSeries'] as bool? ?? true, showChannelFill: json['showChannelFill'] as bool? ?? false, showHistogram: json['showHistogram'] as bool? ?? false, @@ -28,10 +28,10 @@ ADXIndicatorConfig _$ADXIndicatorConfigFromJson(Map json) => barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$ADXIndicatorConfigToJson(ADXIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart index cc3c79527..2e52362fa 100644 --- a/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart @@ -9,12 +9,12 @@ part of 'alligator_indicator_config.dart'; AlligatorIndicatorConfig _$AlligatorIndicatorConfigFromJson( Map json) => AlligatorIndicatorConfig( - jawPeriod: json['jawPeriod'] as int? ?? 13, - teethPeriod: json['teethPeriod'] as int? ?? 8, - lipsPeriod: json['lipsPeriod'] as int? ?? 5, - jawOffset: json['jawOffset'] as int? ?? 8, - teethOffset: json['teethOffset'] as int? ?? 5, - lipsOffset: json['lipsOffset'] as int? ?? 3, + jawPeriod: (json['jawPeriod'] as num?)?.toInt() ?? 13, + teethPeriod: (json['teethPeriod'] as num?)?.toInt() ?? 8, + lipsPeriod: (json['lipsPeriod'] as num?)?.toInt() ?? 5, + jawOffset: (json['jawOffset'] as num?)?.toInt() ?? 8, + teethOffset: (json['teethOffset'] as num?)?.toInt() ?? 5, + lipsOffset: (json['lipsOffset'] as num?)?.toInt() ?? 3, showLines: json['showLines'] as bool? ?? true, showFractal: json['showFractal'] as bool? ?? false, jawLineStyle: json['jawLineStyle'] == null @@ -28,8 +28,8 @@ AlligatorIndicatorConfig _$AlligatorIndicatorConfigFromJson( : LineStyle.fromJson(json['lipsLineStyle'] as Map), showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, - pipSize: json['pipSize'] as int? ?? 4, + number: (json['number'] as num?)?.toInt() ?? 0, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, ); Map _$AlligatorIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart index 05f86dcbc..88d39f9a1 100644 --- a/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart @@ -9,17 +9,17 @@ part of 'aroon_indicator_config.dart'; AroonIndicatorConfig _$AroonIndicatorConfigFromJson( Map json) => AroonIndicatorConfig( - period: json['period'] as int? ?? 14, + period: (json['period'] as num?)?.toInt() ?? 14, upLineStyle: json['upLineStyle'] == null ? const LineStyle(color: Colors.green) : LineStyle.fromJson(json['upLineStyle'] as Map), downLineStyle: json['downLineStyle'] == null ? const LineStyle(color: Colors.red) : LineStyle.fromJson(json['downLineStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$AroonIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart index a84ae0e7e..60688c70a 100644 --- a/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart @@ -12,9 +12,9 @@ AwesomeOscillatorIndicatorConfig _$AwesomeOscillatorIndicatorConfigFromJson( barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, showLastIndicator: json['showLastIndicator'] as bool? ?? false, ); diff --git a/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart index 48b84b7dc..bf2f084b3 100644 --- a/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'bollinger_bands_indicator_config.dart'; BollingerBandsIndicatorConfig _$BollingerBandsIndicatorConfigFromJson( Map json) => BollingerBandsIndicatorConfig( - period: json['period'] as int? ?? 50, + period: (json['period'] as num?)?.toInt() ?? 50, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, @@ -26,10 +26,10 @@ BollingerBandsIndicatorConfig _$BollingerBandsIndicatorConfigFromJson( : LineStyle.fromJson(json['lowerLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson(json['fillColor'] as int), + : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), showChannelFill: json['showChannelFill'] as bool? ?? true, showLastIndicator: json['showLastIndicator'] as bool? ?? false, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$BollingerBandsIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart index d9726e729..57f8f325c 100644 --- a/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart @@ -8,7 +8,7 @@ part of 'cci_indicator_config.dart'; CCIIndicatorConfig _$CCIIndicatorConfigFromJson(Map json) => CCIIndicatorConfig( - period: json['period'] as int? ?? 20, + period: (json['period'] as num?)?.toInt() ?? 20, oscillatorLinesConfig: json['oscillatorLinesConfig'] == null ? const OscillatorLinesConfig( overboughtValue: 100, oversoldValue: -100) @@ -18,10 +18,10 @@ CCIIndicatorConfig _$CCIIndicatorConfigFromJson(Map json) => lineStyle: json['lineStyle'] == null ? const LineStyle(color: Colors.white) : LineStyle.fromJson(json['lineStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$CCIIndicatorConfigToJson(CCIIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart index a2683d40c..d7367a5c4 100644 --- a/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart @@ -9,8 +9,8 @@ part of 'donchian_channel_indicator_config.dart'; DonchianChannelIndicatorConfig _$DonchianChannelIndicatorConfigFromJson( Map json) => DonchianChannelIndicatorConfig( - highPeriod: json['highPeriod'] as int? ?? 10, - lowPeriod: json['lowPeriod'] as int? ?? 10, + highPeriod: (json['highPeriod'] as num?)?.toInt() ?? 10, + lowPeriod: (json['lowPeriod'] as num?)?.toInt() ?? 10, showChannelFill: json['showChannelFill'] as bool? ?? true, upperLineStyle: json['upperLineStyle'] == null ? const LineStyle(color: Colors.red) @@ -23,11 +23,11 @@ DonchianChannelIndicatorConfig _$DonchianChannelIndicatorConfigFromJson( : LineStyle.fromJson(json['lowerLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson(json['fillColor'] as int), + : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, - pipSize: json['pipSize'] as int? ?? 4, + number: (json['number'] as num?)?.toInt() ?? 0, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, ); Map _$DonchianChannelIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart index d3f37bebb..4a444b817 100644 --- a/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart @@ -8,7 +8,7 @@ part of 'dpo_indicator_config.dart'; DPOIndicatorConfig _$DPOIndicatorConfigFromJson(Map json) => DPOIndicatorConfig( - period: json['period'] as int? ?? 14, + period: (json['period'] as num?)?.toInt() ?? 14, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, @@ -17,16 +17,15 @@ DPOIndicatorConfig _$DPOIndicatorConfigFromJson(Map json) => lineStyle: json['lineStyle'] == null ? null : LineStyle.fromJson(json['lineStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$DPOIndicatorConfigToJson(DPOIndicatorConfig instance) => { 'number': instance.number, - 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'period': instance.period, @@ -34,6 +33,7 @@ Map _$DPOIndicatorConfigToJson(DPOIndicatorConfig instance) => _$MovingAverageTypeEnumMap[instance.movingAverageType]!, 'fieldType': instance.fieldType, 'lineStyle': instance.lineStyle, + 'title': instance.title, 'isCentered': instance.isCentered, }; diff --git a/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart index 04a7f8835..32fdec10d 100644 --- a/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart @@ -17,12 +17,12 @@ FractalChaosBandIndicatorConfig _$FractalChaosBandIndicatorConfigFromJson( : LineStyle.fromJson(json['lowLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson(json['fillColor'] as int), + : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), showChannelFill: json['showChannelFill'] as bool? ?? false, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, - pipSize: json['pipSize'] as int? ?? 4, + number: (json['number'] as num?)?.toInt() ?? 0, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, ); Map _$FractalChaosBandIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart index bfff2caae..53040cbb2 100644 --- a/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart @@ -9,18 +9,18 @@ part of 'gator_indicator_config.dart'; GatorIndicatorConfig _$GatorIndicatorConfigFromJson( Map json) => GatorIndicatorConfig( - jawPeriod: json['jawPeriod'] as int? ?? 13, - teethPeriod: json['teethPeriod'] as int? ?? 8, - lipsPeriod: json['lipsPeriod'] as int? ?? 5, - jawOffset: json['jawOffset'] as int? ?? 8, - teethOffset: json['teethOffset'] as int? ?? 5, - lipsOffset: json['lipsOffset'] as int? ?? 3, + jawPeriod: (json['jawPeriod'] as num?)?.toInt() ?? 13, + teethPeriod: (json['teethPeriod'] as num?)?.toInt() ?? 8, + lipsPeriod: (json['lipsPeriod'] as num?)?.toInt() ?? 5, + jawOffset: (json['jawOffset'] as num?)?.toInt() ?? 8, + teethOffset: (json['teethOffset'] as num?)?.toInt() ?? 5, + lipsOffset: (json['lipsOffset'] as num?)?.toInt() ?? 3, barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$GatorIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart index cc0ab46f2..9cd31626c 100644 --- a/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart @@ -9,10 +9,11 @@ part of 'ichimoku_cloud_indicator_config.dart'; IchimokuCloudIndicatorConfig _$IchimokuCloudIndicatorConfigFromJson( Map json) => IchimokuCloudIndicatorConfig( - baseLinePeriod: json['baseLinePeriod'] as int? ?? 26, - conversionLinePeriod: json['conversionLinePeriod'] as int? ?? 9, - laggingSpanOffset: json['laggingSpanOffset'] as int? ?? -26, - spanBPeriod: json['spanBPeriod'] as int? ?? 52, + baseLinePeriod: (json['baseLinePeriod'] as num?)?.toInt() ?? 26, + conversionLinePeriod: + (json['conversionLinePeriod'] as num?)?.toInt() ?? 9, + laggingSpanOffset: (json['laggingSpanOffset'] as num?)?.toInt() ?? -26, + spanBPeriod: (json['spanBPeriod'] as num?)?.toInt() ?? 52, conversionLineStyle: json['conversionLineStyle'] == null ? const LineStyle(color: Colors.indigo) : LineStyle.fromJson( @@ -32,7 +33,7 @@ IchimokuCloudIndicatorConfig _$IchimokuCloudIndicatorConfigFromJson( json['laggingLineStyle'] as Map), showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$IchimokuCloudIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart index 603282983..9202ac83b 100644 --- a/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'ma_env_indicator_config.dart'; MAEnvIndicatorConfig _$MAEnvIndicatorConfigFromJson( Map json) => MAEnvIndicatorConfig( - period: json['period'] as int? ?? 50, + period: (json['period'] as num?)?.toInt() ?? 50, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, @@ -28,10 +28,10 @@ MAEnvIndicatorConfig _$MAEnvIndicatorConfigFromJson( : LineStyle.fromJson(json['lowerLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson(json['fillColor'] as int), + : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), showChannelFill: json['showChannelFill'] as bool? ?? true, showLastIndicator: json['showLastIndicator'] as bool? ?? false, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$MAEnvIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart index 4648996d7..523853d61 100644 --- a/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart @@ -8,26 +8,25 @@ part of 'ma_indicator_config.dart'; MAIndicatorConfig _$MAIndicatorConfigFromJson(Map json) => MAIndicatorConfig( - period: json['period'] as int?, + period: (json['period'] as num?)?.toInt(), movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']), fieldType: json['fieldType'] as String?, lineStyle: json['lineStyle'] == null ? null : LineStyle.fromJson(json['lineStyle'] as Map), - offset: json['offset'] as int?, + offset: (json['offset'] as num?)?.toInt(), isOverlay: json['isOverlay'] as bool? ?? true, - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$MAIndicatorConfigToJson(MAIndicatorConfig instance) => { 'isOverlay': instance.isOverlay, 'number': instance.number, - 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'period': instance.period, @@ -36,6 +35,7 @@ Map _$MAIndicatorConfigToJson(MAIndicatorConfig instance) => 'fieldType': instance.fieldType, 'lineStyle': instance.lineStyle, 'offset': instance.offset, + 'title': instance.title, }; const _$MovingAverageTypeEnumMap = { diff --git a/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart index a70ecbb6d..ec4dd13ca 100644 --- a/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart @@ -8,9 +8,9 @@ part of 'macd_indicator_config.dart'; MACDIndicatorConfig _$MACDIndicatorConfigFromJson(Map json) => MACDIndicatorConfig( - fastMAPeriod: json['fastMAPeriod'] as int? ?? 12, - slowMAPeriod: json['slowMAPeriod'] as int? ?? 26, - signalPeriod: json['signalPeriod'] as int? ?? 9, + fastMAPeriod: (json['fastMAPeriod'] as num?)?.toInt() ?? 12, + slowMAPeriod: (json['slowMAPeriod'] as num?)?.toInt() ?? 26, + signalPeriod: (json['signalPeriod'] as num?)?.toInt() ?? 9, barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), @@ -20,17 +20,16 @@ MACDIndicatorConfig _$MACDIndicatorConfigFromJson(Map json) => signalLineStyle: json['signalLineStyle'] == null ? const LineStyle(color: Colors.redAccent) : LineStyle.fromJson(json['signalLineStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$MACDIndicatorConfigToJson( MACDIndicatorConfig instance) => { 'number': instance.number, - 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'fastMAPeriod': instance.fastMAPeriod, @@ -39,4 +38,5 @@ Map _$MACDIndicatorConfigToJson( 'barStyle': instance.barStyle, 'lineStyle': instance.lineStyle, 'signalLineStyle': instance.signalLineStyle, + 'title': instance.title, }; diff --git a/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart index 5f1c38427..f1247511f 100644 --- a/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart @@ -16,7 +16,7 @@ ParabolicSARConfig _$ParabolicSARConfigFromJson(Map json) => ? const ScatterStyle() : ScatterStyle.fromJson(json['scatterStyle'] as Map), title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$ParabolicSARConfigToJson(ParabolicSARConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart index 0a4d53b69..32ef66aab 100644 --- a/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart @@ -9,21 +9,23 @@ part of 'rainbow_indicator_config.dart'; RainbowIndicatorConfig _$RainbowIndicatorConfigFromJson( Map json) => RainbowIndicatorConfig( - period: json['period'] as int? ?? 50, + period: (json['period'] as num?)?.toInt() ?? 50, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, fieldType: json['fieldType'] as String? ?? 'close', - bandsCount: json['bandsCount'] as int? ?? 10, + bandsCount: (json['bandsCount'] as num?)?.toInt() ?? 10, rainbowLineStyles: (json['rainbowLineStyles'] as List?) ?.map((e) => LineStyle.fromJson(e as Map)) .toList(), showLastIndicator: json['showLastIndicator'] as bool? ?? false, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$RainbowIndicatorConfigToJson( RainbowIndicatorConfig instance) => { + 'number': instance.number, 'showLastIndicator': instance.showLastIndicator, 'period': instance.period, 'movingAverageType': diff --git a/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart index 7ec5ab725..fe3f70bdd 100644 --- a/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart @@ -8,15 +8,15 @@ part of 'roc_indicator_config.dart'; ROCIndicatorConfig _$ROCIndicatorConfigFromJson(Map json) => ROCIndicatorConfig( - period: json['period'] as int? ?? 14, + period: (json['period'] as num?)?.toInt() ?? 14, fieldType: json['fieldType'] as String? ?? 'close', lineStyle: json['lineStyle'] == null ? null : LineStyle.fromJson(json['lineStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$ROCIndicatorConfigToJson(ROCIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart index d993f44aa..6530fb3b8 100644 --- a/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart @@ -8,7 +8,7 @@ part of 'rsi_indicator_config.dart'; RSIIndicatorConfig _$RSIIndicatorConfigFromJson(Map json) => RSIIndicatorConfig( - period: json['period'] as int? ?? 14, + period: (json['period'] as num?)?.toInt() ?? 14, fieldType: json['fieldType'] as String? ?? 'close', oscillatorLinesConfig: json['oscillatorLinesConfig'] == null ? const OscillatorLinesConfig(overboughtValue: 80, oversoldValue: 20) @@ -19,16 +19,15 @@ RSIIndicatorConfig _$RSIIndicatorConfigFromJson(Map json) => : LineStyle.fromJson(json['lineStyle'] as Map), pinLabels: json['pinLabels'] as bool? ?? false, showZones: json['showZones'] as bool? ?? true, - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$RSIIndicatorConfigToJson(RSIIndicatorConfig instance) => { 'number': instance.number, - 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'period': instance.period, @@ -37,4 +36,5 @@ Map _$RSIIndicatorConfigToJson(RSIIndicatorConfig instance) => 'pinLabels': instance.pinLabels, 'oscillatorLinesConfig': instance.oscillatorLinesConfig, 'showZones': instance.showZones, + 'title': instance.title, }; diff --git a/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart index 3baf45a56..7b9aa698e 100644 --- a/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart @@ -8,10 +8,11 @@ part of 'smi_indicator_config.dart'; SMIIndicatorConfig _$SMIIndicatorConfigFromJson(Map json) => SMIIndicatorConfig( - period: json['period'] as int? ?? 10, - smoothingPeriod: json['smoothingPeriod'] as int? ?? 3, - doubleSmoothingPeriod: json['doubleSmoothingPeriod'] as int? ?? 3, - signalPeriod: json['signalPeriod'] as int? ?? 10, + period: (json['period'] as num?)?.toInt() ?? 10, + smoothingPeriod: (json['smoothingPeriod'] as num?)?.toInt() ?? 3, + doubleSmoothingPeriod: + (json['doubleSmoothingPeriod'] as num?)?.toInt() ?? 3, + signalPeriod: (json['signalPeriod'] as num?)?.toInt() ?? 10, smiOscillatorLimits: json['smiOscillatorLimits'] == null ? const OscillatorLinesConfig( oversoldValue: -40, @@ -29,10 +30,10 @@ SMIIndicatorConfig _$SMIIndicatorConfigFromJson(Map json) => signalLineStyle: json['signalLineStyle'] == null ? null : LineStyle.fromJson(json['signalLineStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$SMIIndicatorConfigToJson(SMIIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart index b7f2bb35d..248bd315b 100644 --- a/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'stochastic_oscillator_indicator_config.dart'; StochasticOscillatorIndicatorConfig _$StochasticOscillatorIndicatorConfigFromJson(Map json) => StochasticOscillatorIndicatorConfig( - period: json['period'] as int? ?? 14, + period: (json['period'] as num?)?.toInt() ?? 14, fieldType: json['fieldType'] as String? ?? 'close', overBoughtPrice: (json['overBoughtPrice'] as num?)?.toDouble() ?? 80, overSoldPrice: (json['overSoldPrice'] as num?)?.toDouble() ?? 20, @@ -31,10 +31,10 @@ StochasticOscillatorIndicatorConfig ? const LineStyle(color: Colors.red) : LineStyle.fromJson( json['slowLineStyle'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$StochasticOscillatorIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart index c21e3d75b..b6923a140 100644 --- a/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'williams_r_indicator_config.dart'; WilliamsRIndicatorConfig _$WilliamsRIndicatorConfigFromJson( Map json) => WilliamsRIndicatorConfig( - period: json['period'] as int? ?? 14, + period: (json['period'] as num?)?.toInt() ?? 14, lineStyle: json['lineStyle'] == null ? const LineStyle(color: Colors.white) : LineStyle.fromJson(json['lineStyle'] as Map), @@ -23,10 +23,10 @@ WilliamsRIndicatorConfig _$WilliamsRIndicatorConfigFromJson( oversoldValue: -80, overboughtValue: -20) : OscillatorLinesConfig.fromJson( json['oscillatorLimits'] as Map), - pipSize: json['pipSize'] as int? ?? 4, + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$WilliamsRIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart index 09cfef394..fde715e95 100644 --- a/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart @@ -14,7 +14,7 @@ ZigZagIndicatorConfig _$ZigZagIndicatorConfigFromJson( ? const LineStyle(thickness: 0.9, color: Colors.blue) : LineStyle.fromJson(json['lineStyle'] as Map), title: json['title'] as String?, - number: json['number'] as int? ?? 0, + number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$ZigZagIndicatorConfigToJson( diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index a3c63ca3d..9ee398bc8 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -167,6 +167,7 @@ void drawValueLabel({ required double value, required int pipSize, required Size size, + required TextStyle textStyle, Color color = Colors.white, Color backgroundColor = Colors.transparent, }) { @@ -177,8 +178,8 @@ void drawValueLabel({ final String formattedValue = value.toStringAsFixed(pipSize); // Create text painter to measure text dimensions - final TextPainter textPainter = _getTextPainter(formattedValue, color) - ..layout(); + final TextPainter textPainter = + _getTextPainter(formattedValue, color, textStyle: textStyle)..layout(); // Create rectangle with padding around the text final double rectWidth = textPainter.width + 24; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index f79088fe4..afb46349f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -87,6 +87,7 @@ class HorizontalLineAddingPreviewDesktop size: size, color: interactableDrawing.config.lineStyle.color, backgroundColor: chartTheme.backgroundColor, + textStyle: interactableDrawing.config.labelStyle, ); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index cb39cbac6..f9dee6892 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -108,6 +108,7 @@ class HorizontalLineAddingPreviewMobile value: interactableDrawing.startPoint!.quote, pipSize: chartConfig.pipSize, size: size, + textStyle: interactableDrawing.config.labelStyle, color: interactableDrawing.config.lineStyle.color, backgroundColor: chartTheme.backgroundColor, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 0df3cc7a0..25e560ab4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -164,6 +164,7 @@ class HorizontalLineInteractableDrawing value: startPoint!.quote, pipSize: chartConfig.pipSize, size: size, + textStyle: config.labelStyle, color: config.lineStyle.color .withOpacity(animationInfo.stateChangePercent), backgroundColor: chartTheme.backgroundColor diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart index 11b1fa40f..1f8515b88 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart @@ -24,6 +24,7 @@ class InteractiveLayerController extends ChangeNotifier { /// The current state of the interactive layer. set currentState(InteractiveState state) { + print('@@@@ State changed to ${state.runtimeType}'); _currentState = state; notifyListeners(); } From 12b21bec11910ba2f0b4349984c83b396b17e7d0 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 12:58:13 +0800 Subject: [PATCH 231/311] fix: drawing not focused after just being added --- .../interactive_layer_behaviour.dart | 1 - .../interactive_adding_tool_state.dart | 12 ++++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index e7ef8f5fa..9738c3988 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -1,5 +1,4 @@ import 'dart:async'; -import 'dart:ui'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index db03932d6..f18f3a2ad 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -1,4 +1,3 @@ -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:flutter/gestures.dart'; @@ -8,6 +7,7 @@ import '../interactable_drawings/drawing_v2.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; +import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is being added. @@ -143,17 +143,17 @@ class InteractiveAddingToolState extends InteractiveState void onTap(TapUpDetails details) { _drawingPreview! .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { + interactiveLayer.clearAddingDrawing(); + final DrawingToolConfig config = interactiveLayer + .addDrawing(_drawingPreview!.interactableDrawing.getUpdatedConfig()); + interactiveLayerBehaviour.updateStateTo( InteractiveSelectedToolState( - selected: _drawingPreview!.interactableDrawing, + selected: config.getInteractableDrawing(), interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, ); - - interactiveLayer - ..clearAddingDrawing() - ..addDrawing(_drawingPreview!.interactableDrawing.getUpdatedConfig()); }); } } From 68c69cfac8e6bceaa7ec7e6451bb415c42c52b61 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 13:33:41 +0800 Subject: [PATCH 232/311] go to selected state in layer itself --- .../interactive_layer/interactive_layer.dart | 41 +++++++++++++++++-- .../interactive_layer_behaviour.dart | 2 +- .../interactive_adding_tool_state.dart | 10 ++--- .../interactive_selected_tool_state.dart | 1 - 4 files changed, 42 insertions(+), 12 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 8f5d4fc84..ea015bb8f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -93,7 +93,7 @@ class _InteractiveLayerState extends State { final Map _debounceTimers = {}; /// Duration for debouncing repository updates (1-sec is a good balance) - static const Duration _debounceDuration = Duration(milliseconds: 500); + static const Duration _debounceDuration = Duration(milliseconds: 300); @override void initState() { @@ -266,6 +266,8 @@ class _InteractiveLayerGestureHandlerState static const Curve _stateChangeCurve = Curves.easeOut; final InteractionNotifier _interactionNotifier = InteractionNotifier(); + String? _addedDrawing; + @override AnimationController? get stateChangeAnimationController => _stateChangeController; @@ -294,13 +296,41 @@ class _InteractiveLayerGestureHandlerState void didUpdateWidget(covariant _InteractiveLayerGestureHandler oldWidget) { super.didUpdateWidget(oldWidget); + _checkAddingToolToLayer(oldWidget); + } + + void _checkAddingToolToLayer(_InteractiveLayerGestureHandler oldWidget) { + _checkNeedStartAdding(oldWidget); + _checkIsAToolAdded(); + } + + /// Checks if user want to add a new drawing tool and starts adding it if so + void _checkNeedStartAdding(_InteractiveLayerGestureHandler oldWidget) { if (widget.addingDrawingTool != null && widget.addingDrawingTool != oldWidget.addingDrawingTool) { widget.interactiveLayerBehaviour - .onAddDrawingTool(widget.addingDrawingTool!); + .startAddingTool(widget.addingDrawingTool!); } } + /// Checks if a tool has been added to the layer and updates the state to + /// [InteractiveSelectedToolState] if it has. + void _checkIsAToolAdded() { + for (final drawing in widget.drawings) { + if (drawing.id == _addedDrawing) { + widget.interactiveLayerBehaviour.updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayerBehaviour: widget.interactiveLayerBehaviour), + StateChangeAnimationDirection.forward, + ); + break; + } + } + + _addedDrawing = null; + } + @override Future animateStateChange( StateChangeAnimationDirection direction) async { @@ -447,8 +477,11 @@ class _InteractiveLayerGestureHandlerState void clearAddingDrawing() => widget.onClearAddingDrawingTool.call(); @override - DrawingToolConfig addDrawing(DrawingToolConfig drawing) => - widget.onAddDrawing.call(drawing); + DrawingToolConfig addDrawing(DrawingToolConfig drawing) { + final config = widget.onAddDrawing.call(drawing); + _addedDrawing = config.configId; + return config; + } @override void saveDrawing(DrawingToolConfig drawing) => diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 9738c3988..049a08be5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -97,7 +97,7 @@ abstract class InteractiveLayerBehaviour { } /// Handles the addition of a drawing tool. - void onAddDrawingTool(DrawingToolConfig drawingTool) { + void startAddingTool(DrawingToolConfig drawingTool) { updateStateTo( InteractiveAddingToolState(drawingTool, interactiveLayerBehaviour: this), StateChangeAnimationDirection.forward, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index f18f3a2ad..1214d4cc7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -7,7 +7,6 @@ import '../interactable_drawings/drawing_v2.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; -import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is being added. @@ -143,13 +142,12 @@ class InteractiveAddingToolState extends InteractiveState void onTap(TapUpDetails details) { _drawingPreview! .onCreateTap(details, epochFromX, quoteFromY, epochToX, quoteToY, () { - interactiveLayer.clearAddingDrawing(); - final DrawingToolConfig config = interactiveLayer - .addDrawing(_drawingPreview!.interactableDrawing.getUpdatedConfig()); + interactiveLayer + ..clearAddingDrawing() + ..addDrawing(_drawingPreview!.interactableDrawing.getUpdatedConfig()); interactiveLayerBehaviour.updateStateTo( - InteractiveSelectedToolState( - selected: config.getInteractableDrawing(), + InteractiveNormalState( interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 601c79a7f..ef16ce553 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -131,7 +131,6 @@ class InteractiveSelectedToolState extends InteractiveState InteractiveNormalState( interactiveLayerBehaviour: interactiveLayerBehaviour), StateChangeAnimationDirection.backward, - waitForAnimation: true, ); } } From 16d6fb6bbc5d6c278788ac55e0ee9f38dce327ad Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 13:46:33 +0800 Subject: [PATCH 233/311] go to selected state inside behaviour class after a tool just been added --- .../interactive_layer/interactive_layer.dart | 7 +------ .../interactive_layer_behaviour.dart | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index ea015bb8f..c672d1b81 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -318,12 +318,7 @@ class _InteractiveLayerGestureHandlerState void _checkIsAToolAdded() { for (final drawing in widget.drawings) { if (drawing.id == _addedDrawing) { - widget.interactiveLayerBehaviour.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayerBehaviour: widget.interactiveLayerBehaviour), - StateChangeAnimationDirection.forward, - ); + widget.interactiveLayerBehaviour.aNewToolsIsAdded(drawing); break; } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 049a08be5..64fa82c10 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -1,5 +1,6 @@ import 'dart:async'; +import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; @@ -97,6 +98,7 @@ abstract class InteractiveLayerBehaviour { } /// Handles the addition of a drawing tool. + /// Will be called when we want to add [drawingTool] to the layer. void startAddingTool(DrawingToolConfig drawingTool) { updateStateTo( InteractiveAddingToolState(drawingTool, interactiveLayerBehaviour: this), @@ -104,6 +106,18 @@ abstract class InteractiveLayerBehaviour { ); } + /// Will be called right after the process of [startAddingTool] is completed + /// without cancellation. + /// + /// It can be used to perform any additional actions after a new tool is added + void aNewToolsIsAdded(InteractableDrawing drawing) => updateStateTo( + InteractiveSelectedToolState( + selected: drawing, + interactiveLayerBehaviour: this, + ), + StateChangeAnimationDirection.forward, + ); + /// The drawings of the interactive layer. Set getToolState(DrawingV2 drawing) => currentState.getToolState(drawing); From a55e47bd55e92de764ae1ce689f00c28ef5ee919 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 13:48:39 +0800 Subject: [PATCH 234/311] change the default textStyle of the horizontal line --- .../horizontal/horizontal_drawing_tool_config.dart | 7 ++++++- .../interactive_layer_behaviour.dart | 3 +++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index 6c47c4d61..ca3f85ffc 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -24,7 +24,12 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { DrawingData? drawingData, List edgePoints = const [], this.lineStyle = const LineStyle(thickness: 0.9, color: Colors.white), - this.labelStyle = TextStyles.currentSpotTextStyle, + this.labelStyle = const TextStyle( + fontSize: 12, + fontStyle: FontStyle.normal, + fontWeight: FontWeight.w600, + height: 1.67, // lineHeight (20px) / fontSize (12px) = 1.67 + ), this.pattern = DrawingPatterns.solid, this.enableLabel = true, super.number, diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 64fa82c10..25733ec1c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -110,6 +110,9 @@ abstract class InteractiveLayerBehaviour { /// without cancellation. /// /// It can be used to perform any additional actions after a new tool is added + /// + /// By default, it will update the state to [InteractiveSelectedToolState] + /// with the newly added drawing. void aNewToolsIsAdded(InteractableDrawing drawing) => updateStateTo( InteractiveSelectedToolState( selected: drawing, From 2763dfde81e0c664b5c2744ec23aadf853ecaf71 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 13:50:39 +0800 Subject: [PATCH 235/311] fix: fix a formatting issue --- .../interactive_layer/interactable_drawings/drawing_v2.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index 294bf4544..eb53b5fac 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -95,7 +95,7 @@ abstract class DrawingV2 { QuoteToY quoteToY, AnimationInfo animationInfo, ChartConfig chartConfig, - ChartTheme chartTheme, + ChartTheme chartTheme, GetDrawingState getDrawingState, ); From d77eb31f85ce51b282c36042687ab64017ad2575 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 14:07:57 +0800 Subject: [PATCH 236/311] update selected tool floating menu based on design --- .../horizontal_drawing_tool_config.dart | 1 + .../horizontal_line_interactable_drawing.dart | 17 ++++++++++++----- .../widgets/selected_drawing_floating_menu.dart | 17 +++++++++-------- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index ca3f85ffc..4cc54575c 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -25,6 +25,7 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { List edgePoints = const [], this.lineStyle = const LineStyle(thickness: 0.9, color: Colors.white), this.labelStyle = const TextStyle( + color: Colors.white, fontSize: 12, fontStyle: FontStyle.normal, fontWeight: FontWeight.w600, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 25e560ab4..2fd5a101b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -250,11 +250,18 @@ class HorizontalLineInteractableDrawing ); @override - Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => ColorSelector( - currentColor: config.lineStyle.color, - onColorChanged: (Color newColor) => onUpdate( - config.copyWith( - lineStyle: config.lineStyle.copyWith(color: newColor), + Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => SizedBox( + width: 16, + height: 16, + child: ColorSelector( + currentColor: config.lineStyle.color, + onColorChanged: (Color newColor) => onUpdate( + config.copyWith( + lineStyle: config.lineStyle.copyWith(color: newColor), + labelStyle: config.labelStyle.copyWith( + color: newColor, + ), + ), ), ), ); diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index c42bd5933..1e64182e2 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -1,9 +1,8 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart'; -import 'package:deriv_chart/src/theme/chart_theme.dart'; +import 'package:deriv_chart/src/theme/design_tokens/core_design_tokens.dart'; import 'package:flutter/material.dart'; -import 'package:provider/provider.dart'; import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; import '../interactive_layer_controller.dart'; @@ -99,14 +98,18 @@ class _SelectedDrawingFloatingMenuState }, child: Container( decoration: BoxDecoration( - color: context.watch().backgroundColor, + // TODO(NA): use a color from theme when the theme specification in + // design documents has included the color for this menu. + color: CoreDesignTokens.coreColorSolidSlate1100, borderRadius: BorderRadius.circular(8), ), + padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), child: Row( children: [ - _buildRemoveButton(context), - _buildTitle(), + const Icon(Icons.drag_indicator), + const SizedBox(width: 8), _buildDrawingMenuOptions(), + _buildRemoveButton(context), ], ), ), @@ -118,11 +121,9 @@ class _SelectedDrawingFloatingMenuState onUpdate: widget.onUpdateDrawing, ); - Widget _buildTitle() => Text(widget.drawing.runtimeType.toString()); - Widget _buildRemoveButton(BuildContext context) => IconButton( icon: const Icon(Icons.delete_outline), - color: context.watch().gridTextColor, + color: Colors.red, onPressed: () => widget.onRemoveDrawing(widget.drawing.config), ); } From 119a3812fe7ad7a7f9b875e88135bc80d055be0c Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 14:08:48 +0800 Subject: [PATCH 237/311] chore: code cleanup: --- .../interactive_layer/interactive_layer_controller.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart index 1f8515b88..11b1fa40f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart @@ -24,7 +24,6 @@ class InteractiveLayerController extends ChangeNotifier { /// The current state of the interactive layer. set currentState(InteractiveState state) { - print('@@@@ State changed to ${state.runtimeType}'); _currentState = state; notifyListeners(); } From 1e1b9123216bf796e3178d50999fe1dc9ea5bab5 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 14:23:40 +0800 Subject: [PATCH 238/311] chore: code cleanup: --- .../horizontal_drawing_tool_config.dart | 2 +- .../horizontal_line_interactable_drawing.dart | 38 +++++++++++++------ .../selected_drawing_floating_menu.dart | 1 - 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index 4cc54575c..882c8749e 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -23,7 +23,7 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { String? configId, DrawingData? drawingData, List edgePoints = const [], - this.lineStyle = const LineStyle(thickness: 0.9, color: Colors.white), + this.lineStyle = const LineStyle(color: Colors.white), this.labelStyle = const TextStyle( color: Colors.white, fontSize: 12, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 2fd5a101b..0ac0c3354 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -13,10 +13,10 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawi import 'package:deriv_chart/src/models/axis_range.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/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/widgets.dart'; import '../../enums/drawing_tool_state.dart'; import '../../helpers/paint_helpers.dart'; @@ -250,19 +250,33 @@ class HorizontalLineInteractableDrawing ); @override - Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => SizedBox( - width: 16, - height: 16, - child: ColorSelector( - currentColor: config.lineStyle.color, - onColorChanged: (Color newColor) => onUpdate( - config.copyWith( - lineStyle: config.lineStyle.copyWith(color: newColor), - labelStyle: config.labelStyle.copyWith( - color: newColor, + Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => Row( + children: [ + TextButton( + onPressed: () { + // update line thickness + }, + child: Text( + '${config.lineStyle.thickness}px', + style: const TextStyle(color: Colors.white), + textAlign: TextAlign.center, + ), + ), + SizedBox( + width: 16, + height: 16, + child: ColorSelector( + currentColor: config.lineStyle.color, + onColorChanged: (Color newColor) => onUpdate( + config.copyWith( + lineStyle: config.lineStyle.copyWith(color: newColor), + labelStyle: config.labelStyle.copyWith( + color: newColor, + ), + ), ), ), ), - ), + ], ); } diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 1e64182e2..c0d71a53f 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -107,7 +107,6 @@ class _SelectedDrawingFloatingMenuState child: Row( children: [ const Icon(Icons.drag_indicator), - const SizedBox(width: 8), _buildDrawingMenuOptions(), _buildRemoveButton(context), ], From a21bae3f2ba2228facd4302de8a669a45445d733 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 14:26:50 +0800 Subject: [PATCH 239/311] fix lint warnings --- .../trend_line/trend_line_adding_preview_mobile.dart | 2 -- .../interactive_layer_behaviour.dart | 2 +- .../interactive_layer_mobile_behaviour.dart | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index 27203506c..dace7f584 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -168,7 +168,6 @@ class TrendLineAddingPreviewMobile interactiveLayerBehaviour.updateStateTo( interactiveLayerBehaviour.currentState, StateChangeAnimationDirection.forward, - waitForAnimation: true, ); interactableDrawing.onDragStart( @@ -181,7 +180,6 @@ class TrendLineAddingPreviewMobile interactiveLayerBehaviour.updateStateTo( interactiveLayerBehaviour.currentState, StateChangeAnimationDirection.backward, - waitForAnimation: true, ); interactableDrawing.onDragEnd( diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 25733ec1c..0c4cfc17e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -1,6 +1,5 @@ import 'dart:async'; -import 'package:deriv_chart/deriv_chart.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; @@ -16,6 +15,7 @@ import '../interactive_layer_base.dart'; import '../interactive_layer_controller.dart'; import '../interactive_layer_states/interactive_adding_tool_state.dart'; import '../interactive_layer_states/interactive_normal_state.dart'; +import '../interactive_layer_states/interactive_selected_tool_state.dart'; import '../interactive_layer_states/interactive_state.dart'; /// The base class for managing [InteractiveLayerBase]'s behaviour according to diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart index 2e1641654..1a5dc73f6 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart @@ -12,7 +12,7 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { InteractiveLayerMobileBehaviour({super.controller}); @override - void onAddDrawingTool(DrawingToolConfig drawingTool) { + void startAddingTool(DrawingToolConfig drawingTool) { final newState = InteractiveAddingToolStateMobile( drawingTool, interactiveLayerBehaviour: this, From 6046605d1c7a663e45c56cc4381548c8622bfc2d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 14:30:35 +0800 Subject: [PATCH 240/311] revert some unnecessary changes --- .../adx/adx_indicator_config.g.dart | 8 ++++---- .../alligator/alligator_indicator_config.g.dart | 16 ++++++++-------- .../aroon/aroon_indicator_config.g.dart | 6 +++--- .../awesome_oscillator_indicator_config.g.dart | 4 ++-- .../bollinger_bands_indicator_config.g.dart | 6 +++--- .../cci_indicator_config.g.dart | 6 +++--- .../donchian_channel_indicator_config.g.dart | 10 +++++----- .../dpo_indicator/dpo_indicator_config.g.dart | 8 ++++---- .../fcb_indicator/fcb_indicator_config.g.dart | 6 +++--- .../gator/gator_indicator_config.g.dart | 16 ++++++++-------- .../ichimoku_cloud_indicator_config.g.dart | 11 +++++------ .../ma_env_indicator_config.g.dart | 6 +++--- .../ma_indicator/ma_indicator_config.g.dart | 10 +++++----- .../macd_indicator/macd_indicator_config.g.dart | 12 ++++++------ .../parabolic_sar_indicator_config.g.dart | 2 +- .../rainbow_indicator_config.g.dart | 6 ++---- .../roc/roc_indicator_config.g.dart | 6 +++--- .../rsi/rsi_indicator_config.g.dart | 8 ++++---- .../smi/smi_indicator_config.g.dart | 13 ++++++------- ...stochastic_oscillator_indicator_config.g.dart | 6 +++--- .../williams_r_indicator_config.g.dart | 6 +++--- .../zigzag_indicator_config.g.dart | 2 +- 22 files changed, 85 insertions(+), 89 deletions(-) diff --git a/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart index 90aacd710..ae57adcc3 100644 --- a/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/adx/adx_indicator_config.g.dart @@ -8,8 +8,8 @@ part of 'adx_indicator_config.dart'; ADXIndicatorConfig _$ADXIndicatorConfigFromJson(Map json) => ADXIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 14, - smoothingPeriod: (json['smoothingPeriod'] as num?)?.toInt() ?? 14, + period: json['period'] as int? ?? 14, + smoothingPeriod: json['smoothingPeriod'] as int? ?? 14, showSeries: json['showSeries'] as bool? ?? true, showChannelFill: json['showChannelFill'] as bool? ?? false, showHistogram: json['showHistogram'] as bool? ?? false, @@ -28,10 +28,10 @@ ADXIndicatorConfig _$ADXIndicatorConfigFromJson(Map json) => barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$ADXIndicatorConfigToJson(ADXIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart index 2e52362fa..cc3c79527 100644 --- a/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/alligator/alligator_indicator_config.g.dart @@ -9,12 +9,12 @@ part of 'alligator_indicator_config.dart'; AlligatorIndicatorConfig _$AlligatorIndicatorConfigFromJson( Map json) => AlligatorIndicatorConfig( - jawPeriod: (json['jawPeriod'] as num?)?.toInt() ?? 13, - teethPeriod: (json['teethPeriod'] as num?)?.toInt() ?? 8, - lipsPeriod: (json['lipsPeriod'] as num?)?.toInt() ?? 5, - jawOffset: (json['jawOffset'] as num?)?.toInt() ?? 8, - teethOffset: (json['teethOffset'] as num?)?.toInt() ?? 5, - lipsOffset: (json['lipsOffset'] as num?)?.toInt() ?? 3, + jawPeriod: json['jawPeriod'] as int? ?? 13, + teethPeriod: json['teethPeriod'] as int? ?? 8, + lipsPeriod: json['lipsPeriod'] as int? ?? 5, + jawOffset: json['jawOffset'] as int? ?? 8, + teethOffset: json['teethOffset'] as int? ?? 5, + lipsOffset: json['lipsOffset'] as int? ?? 3, showLines: json['showLines'] as bool? ?? true, showFractal: json['showFractal'] as bool? ?? false, jawLineStyle: json['jawLineStyle'] == null @@ -28,8 +28,8 @@ AlligatorIndicatorConfig _$AlligatorIndicatorConfigFromJson( : LineStyle.fromJson(json['lipsLineStyle'] as Map), showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + number: json['number'] as int? ?? 0, + pipSize: json['pipSize'] as int? ?? 4, ); Map _$AlligatorIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart index 88d39f9a1..05f86dcbc 100644 --- a/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/aroon/aroon_indicator_config.g.dart @@ -9,17 +9,17 @@ part of 'aroon_indicator_config.dart'; AroonIndicatorConfig _$AroonIndicatorConfigFromJson( Map json) => AroonIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 14, + period: json['period'] as int? ?? 14, upLineStyle: json['upLineStyle'] == null ? const LineStyle(color: Colors.green) : LineStyle.fromJson(json['upLineStyle'] as Map), downLineStyle: json['downLineStyle'] == null ? const LineStyle(color: Colors.red) : LineStyle.fromJson(json['downLineStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$AroonIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart index 60688c70a..a84ae0e7e 100644 --- a/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/awesome_oscillator/awesome_oscillator_indicator_config.g.dart @@ -12,9 +12,9 @@ AwesomeOscillatorIndicatorConfig _$AwesomeOscillatorIndicatorConfigFromJson( barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, showLastIndicator: json['showLastIndicator'] as bool? ?? false, ); diff --git a/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart index bf2f084b3..48b84b7dc 100644 --- a/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/bollinger_bands/bollinger_bands_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'bollinger_bands_indicator_config.dart'; BollingerBandsIndicatorConfig _$BollingerBandsIndicatorConfigFromJson( Map json) => BollingerBandsIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 50, + period: json['period'] as int? ?? 50, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, @@ -26,10 +26,10 @@ BollingerBandsIndicatorConfig _$BollingerBandsIndicatorConfigFromJson( : LineStyle.fromJson(json['lowerLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), + : const ColorConverter().fromJson(json['fillColor'] as int), showChannelFill: json['showChannelFill'] as bool? ?? true, showLastIndicator: json['showLastIndicator'] as bool? ?? false, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$BollingerBandsIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart index 57f8f325c..d9726e729 100644 --- a/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/commodity_channel_index/cci_indicator_config.g.dart @@ -8,7 +8,7 @@ part of 'cci_indicator_config.dart'; CCIIndicatorConfig _$CCIIndicatorConfigFromJson(Map json) => CCIIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 20, + period: json['period'] as int? ?? 20, oscillatorLinesConfig: json['oscillatorLinesConfig'] == null ? const OscillatorLinesConfig( overboughtValue: 100, oversoldValue: -100) @@ -18,10 +18,10 @@ CCIIndicatorConfig _$CCIIndicatorConfigFromJson(Map json) => lineStyle: json['lineStyle'] == null ? const LineStyle(color: Colors.white) : LineStyle.fromJson(json['lineStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$CCIIndicatorConfigToJson(CCIIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart index d7367a5c4..a2683d40c 100644 --- a/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/donchian_channel/donchian_channel_indicator_config.g.dart @@ -9,8 +9,8 @@ part of 'donchian_channel_indicator_config.dart'; DonchianChannelIndicatorConfig _$DonchianChannelIndicatorConfigFromJson( Map json) => DonchianChannelIndicatorConfig( - highPeriod: (json['highPeriod'] as num?)?.toInt() ?? 10, - lowPeriod: (json['lowPeriod'] as num?)?.toInt() ?? 10, + highPeriod: json['highPeriod'] as int? ?? 10, + lowPeriod: json['lowPeriod'] as int? ?? 10, showChannelFill: json['showChannelFill'] as bool? ?? true, upperLineStyle: json['upperLineStyle'] == null ? const LineStyle(color: Colors.red) @@ -23,11 +23,11 @@ DonchianChannelIndicatorConfig _$DonchianChannelIndicatorConfigFromJson( : LineStyle.fromJson(json['lowerLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), + : const ColorConverter().fromJson(json['fillColor'] as int), showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + number: json['number'] as int? ?? 0, + pipSize: json['pipSize'] as int? ?? 4, ); Map _$DonchianChannelIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart index 4a444b817..d3f37bebb 100644 --- a/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/dpo_indicator/dpo_indicator_config.g.dart @@ -8,7 +8,7 @@ part of 'dpo_indicator_config.dart'; DPOIndicatorConfig _$DPOIndicatorConfigFromJson(Map json) => DPOIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 14, + period: json['period'] as int? ?? 14, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, @@ -17,15 +17,16 @@ DPOIndicatorConfig _$DPOIndicatorConfigFromJson(Map json) => lineStyle: json['lineStyle'] == null ? null : LineStyle.fromJson(json['lineStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$DPOIndicatorConfigToJson(DPOIndicatorConfig instance) => { 'number': instance.number, + 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'period': instance.period, @@ -33,7 +34,6 @@ Map _$DPOIndicatorConfigToJson(DPOIndicatorConfig instance) => _$MovingAverageTypeEnumMap[instance.movingAverageType]!, 'fieldType': instance.fieldType, 'lineStyle': instance.lineStyle, - 'title': instance.title, 'isCentered': instance.isCentered, }; diff --git a/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart index 32fdec10d..04a7f8835 100644 --- a/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/fcb_indicator/fcb_indicator_config.g.dart @@ -17,12 +17,12 @@ FractalChaosBandIndicatorConfig _$FractalChaosBandIndicatorConfigFromJson( : LineStyle.fromJson(json['lowLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), + : const ColorConverter().fromJson(json['fillColor'] as int), showChannelFill: json['showChannelFill'] as bool? ?? false, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + number: json['number'] as int? ?? 0, + pipSize: json['pipSize'] as int? ?? 4, ); Map _$FractalChaosBandIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart index 53040cbb2..bfff2caae 100644 --- a/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/gator/gator_indicator_config.g.dart @@ -9,18 +9,18 @@ part of 'gator_indicator_config.dart'; GatorIndicatorConfig _$GatorIndicatorConfigFromJson( Map json) => GatorIndicatorConfig( - jawPeriod: (json['jawPeriod'] as num?)?.toInt() ?? 13, - teethPeriod: (json['teethPeriod'] as num?)?.toInt() ?? 8, - lipsPeriod: (json['lipsPeriod'] as num?)?.toInt() ?? 5, - jawOffset: (json['jawOffset'] as num?)?.toInt() ?? 8, - teethOffset: (json['teethOffset'] as num?)?.toInt() ?? 5, - lipsOffset: (json['lipsOffset'] as num?)?.toInt() ?? 3, + jawPeriod: json['jawPeriod'] as int? ?? 13, + teethPeriod: json['teethPeriod'] as int? ?? 8, + lipsPeriod: json['lipsPeriod'] as int? ?? 5, + jawOffset: json['jawOffset'] as int? ?? 8, + teethOffset: json['teethOffset'] as int? ?? 5, + lipsOffset: json['lipsOffset'] as int? ?? 3, barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$GatorIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart index 9cd31626c..cc0ab46f2 100644 --- a/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/ichimoku_clouds/ichimoku_cloud_indicator_config.g.dart @@ -9,11 +9,10 @@ part of 'ichimoku_cloud_indicator_config.dart'; IchimokuCloudIndicatorConfig _$IchimokuCloudIndicatorConfigFromJson( Map json) => IchimokuCloudIndicatorConfig( - baseLinePeriod: (json['baseLinePeriod'] as num?)?.toInt() ?? 26, - conversionLinePeriod: - (json['conversionLinePeriod'] as num?)?.toInt() ?? 9, - laggingSpanOffset: (json['laggingSpanOffset'] as num?)?.toInt() ?? -26, - spanBPeriod: (json['spanBPeriod'] as num?)?.toInt() ?? 52, + baseLinePeriod: json['baseLinePeriod'] as int? ?? 26, + conversionLinePeriod: json['conversionLinePeriod'] as int? ?? 9, + laggingSpanOffset: json['laggingSpanOffset'] as int? ?? -26, + spanBPeriod: json['spanBPeriod'] as int? ?? 52, conversionLineStyle: json['conversionLineStyle'] == null ? const LineStyle(color: Colors.indigo) : LineStyle.fromJson( @@ -33,7 +32,7 @@ IchimokuCloudIndicatorConfig _$IchimokuCloudIndicatorConfigFromJson( json['laggingLineStyle'] as Map), showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$IchimokuCloudIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart index 9202ac83b..603282983 100644 --- a/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/ma_env_indicator/ma_env_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'ma_env_indicator_config.dart'; MAEnvIndicatorConfig _$MAEnvIndicatorConfigFromJson( Map json) => MAEnvIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 50, + period: json['period'] as int? ?? 50, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, @@ -28,10 +28,10 @@ MAEnvIndicatorConfig _$MAEnvIndicatorConfigFromJson( : LineStyle.fromJson(json['lowerLineStyle'] as Map), fillColor: json['fillColor'] == null ? Colors.white12 - : const ColorConverter().fromJson((json['fillColor'] as num).toInt()), + : const ColorConverter().fromJson(json['fillColor'] as int), showChannelFill: json['showChannelFill'] as bool? ?? true, showLastIndicator: json['showLastIndicator'] as bool? ?? false, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$MAEnvIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart index 523853d61..4648996d7 100644 --- a/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/ma_indicator/ma_indicator_config.g.dart @@ -8,25 +8,26 @@ part of 'ma_indicator_config.dart'; MAIndicatorConfig _$MAIndicatorConfigFromJson(Map json) => MAIndicatorConfig( - period: (json['period'] as num?)?.toInt(), + period: json['period'] as int?, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']), fieldType: json['fieldType'] as String?, lineStyle: json['lineStyle'] == null ? null : LineStyle.fromJson(json['lineStyle'] as Map), - offset: (json['offset'] as num?)?.toInt(), + offset: json['offset'] as int?, isOverlay: json['isOverlay'] as bool? ?? true, - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$MAIndicatorConfigToJson(MAIndicatorConfig instance) => { 'isOverlay': instance.isOverlay, 'number': instance.number, + 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'period': instance.period, @@ -35,7 +36,6 @@ Map _$MAIndicatorConfigToJson(MAIndicatorConfig instance) => 'fieldType': instance.fieldType, 'lineStyle': instance.lineStyle, 'offset': instance.offset, - 'title': instance.title, }; const _$MovingAverageTypeEnumMap = { diff --git a/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart index ec4dd13ca..a70ecbb6d 100644 --- a/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/macd_indicator/macd_indicator_config.g.dart @@ -8,9 +8,9 @@ part of 'macd_indicator_config.dart'; MACDIndicatorConfig _$MACDIndicatorConfigFromJson(Map json) => MACDIndicatorConfig( - fastMAPeriod: (json['fastMAPeriod'] as num?)?.toInt() ?? 12, - slowMAPeriod: (json['slowMAPeriod'] as num?)?.toInt() ?? 26, - signalPeriod: (json['signalPeriod'] as num?)?.toInt() ?? 9, + fastMAPeriod: json['fastMAPeriod'] as int? ?? 12, + slowMAPeriod: json['slowMAPeriod'] as int? ?? 26, + signalPeriod: json['signalPeriod'] as int? ?? 9, barStyle: json['barStyle'] == null ? const BarStyle() : BarStyle.fromJson(json['barStyle'] as Map), @@ -20,16 +20,17 @@ MACDIndicatorConfig _$MACDIndicatorConfigFromJson(Map json) => signalLineStyle: json['signalLineStyle'] == null ? const LineStyle(color: Colors.redAccent) : LineStyle.fromJson(json['signalLineStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$MACDIndicatorConfigToJson( MACDIndicatorConfig instance) => { 'number': instance.number, + 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'fastMAPeriod': instance.fastMAPeriod, @@ -38,5 +39,4 @@ Map _$MACDIndicatorConfigToJson( 'barStyle': instance.barStyle, 'lineStyle': instance.lineStyle, 'signalLineStyle': instance.signalLineStyle, - 'title': instance.title, }; diff --git a/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart index f1247511f..5f1c38427 100644 --- a/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/parabolic_sar/parabolic_sar_indicator_config.g.dart @@ -16,7 +16,7 @@ ParabolicSARConfig _$ParabolicSARConfigFromJson(Map json) => ? const ScatterStyle() : ScatterStyle.fromJson(json['scatterStyle'] as Map), title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$ParabolicSARConfigToJson(ParabolicSARConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart index 32ef66aab..0a4d53b69 100644 --- a/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/rainbow_indicator/rainbow_indicator_config.g.dart @@ -9,23 +9,21 @@ part of 'rainbow_indicator_config.dart'; RainbowIndicatorConfig _$RainbowIndicatorConfigFromJson( Map json) => RainbowIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 50, + period: json['period'] as int? ?? 50, movingAverageType: $enumDecodeNullable( _$MovingAverageTypeEnumMap, json['movingAverageType']) ?? MovingAverageType.simple, fieldType: json['fieldType'] as String? ?? 'close', - bandsCount: (json['bandsCount'] as num?)?.toInt() ?? 10, + bandsCount: json['bandsCount'] as int? ?? 10, rainbowLineStyles: (json['rainbowLineStyles'] as List?) ?.map((e) => LineStyle.fromJson(e as Map)) .toList(), showLastIndicator: json['showLastIndicator'] as bool? ?? false, - number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$RainbowIndicatorConfigToJson( RainbowIndicatorConfig instance) => { - 'number': instance.number, 'showLastIndicator': instance.showLastIndicator, 'period': instance.period, 'movingAverageType': diff --git a/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart index fe3f70bdd..7ec5ab725 100644 --- a/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/roc/roc_indicator_config.g.dart @@ -8,15 +8,15 @@ part of 'roc_indicator_config.dart'; ROCIndicatorConfig _$ROCIndicatorConfigFromJson(Map json) => ROCIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 14, + period: json['period'] as int? ?? 14, fieldType: json['fieldType'] as String? ?? 'close', lineStyle: json['lineStyle'] == null ? null : LineStyle.fromJson(json['lineStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$ROCIndicatorConfigToJson(ROCIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart index 6530fb3b8..d993f44aa 100644 --- a/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/rsi/rsi_indicator_config.g.dart @@ -8,7 +8,7 @@ part of 'rsi_indicator_config.dart'; RSIIndicatorConfig _$RSIIndicatorConfigFromJson(Map json) => RSIIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 14, + period: json['period'] as int? ?? 14, fieldType: json['fieldType'] as String? ?? 'close', oscillatorLinesConfig: json['oscillatorLinesConfig'] == null ? const OscillatorLinesConfig(overboughtValue: 80, oversoldValue: 20) @@ -19,15 +19,16 @@ RSIIndicatorConfig _$RSIIndicatorConfigFromJson(Map json) => : LineStyle.fromJson(json['lineStyle'] as Map), pinLabels: json['pinLabels'] as bool? ?? false, showZones: json['showZones'] as bool? ?? true, - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$RSIIndicatorConfigToJson(RSIIndicatorConfig instance) => { 'number': instance.number, + 'title': instance.title, 'showLastIndicator': instance.showLastIndicator, 'pipSize': instance.pipSize, 'period': instance.period, @@ -36,5 +37,4 @@ Map _$RSIIndicatorConfigToJson(RSIIndicatorConfig instance) => 'pinLabels': instance.pinLabels, 'oscillatorLinesConfig': instance.oscillatorLinesConfig, 'showZones': instance.showZones, - 'title': instance.title, }; diff --git a/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart index 7b9aa698e..3baf45a56 100644 --- a/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/smi/smi_indicator_config.g.dart @@ -8,11 +8,10 @@ part of 'smi_indicator_config.dart'; SMIIndicatorConfig _$SMIIndicatorConfigFromJson(Map json) => SMIIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 10, - smoothingPeriod: (json['smoothingPeriod'] as num?)?.toInt() ?? 3, - doubleSmoothingPeriod: - (json['doubleSmoothingPeriod'] as num?)?.toInt() ?? 3, - signalPeriod: (json['signalPeriod'] as num?)?.toInt() ?? 10, + period: json['period'] as int? ?? 10, + smoothingPeriod: json['smoothingPeriod'] as int? ?? 3, + doubleSmoothingPeriod: json['doubleSmoothingPeriod'] as int? ?? 3, + signalPeriod: json['signalPeriod'] as int? ?? 10, smiOscillatorLimits: json['smiOscillatorLimits'] == null ? const OscillatorLinesConfig( oversoldValue: -40, @@ -30,10 +29,10 @@ SMIIndicatorConfig _$SMIIndicatorConfigFromJson(Map json) => signalLineStyle: json['signalLineStyle'] == null ? null : LineStyle.fromJson(json['signalLineStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$SMIIndicatorConfigToJson(SMIIndicatorConfig instance) => diff --git a/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart index 248bd315b..b7f2bb35d 100644 --- a/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/stochastic_oscillator_indicator/stochastic_oscillator_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'stochastic_oscillator_indicator_config.dart'; StochasticOscillatorIndicatorConfig _$StochasticOscillatorIndicatorConfigFromJson(Map json) => StochasticOscillatorIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 14, + period: json['period'] as int? ?? 14, fieldType: json['fieldType'] as String? ?? 'close', overBoughtPrice: (json['overBoughtPrice'] as num?)?.toDouble() ?? 80, overSoldPrice: (json['overSoldPrice'] as num?)?.toDouble() ?? 20, @@ -31,10 +31,10 @@ StochasticOscillatorIndicatorConfig ? const LineStyle(color: Colors.red) : LineStyle.fromJson( json['slowLineStyle'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$StochasticOscillatorIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart index b6923a140..c21e3d75b 100644 --- a/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/williams_r/williams_r_indicator_config.g.dart @@ -9,7 +9,7 @@ part of 'williams_r_indicator_config.dart'; WilliamsRIndicatorConfig _$WilliamsRIndicatorConfigFromJson( Map json) => WilliamsRIndicatorConfig( - period: (json['period'] as num?)?.toInt() ?? 14, + period: json['period'] as int? ?? 14, lineStyle: json['lineStyle'] == null ? const LineStyle(color: Colors.white) : LineStyle.fromJson(json['lineStyle'] as Map), @@ -23,10 +23,10 @@ WilliamsRIndicatorConfig _$WilliamsRIndicatorConfigFromJson( oversoldValue: -80, overboughtValue: -20) : OscillatorLinesConfig.fromJson( json['oscillatorLimits'] as Map), - pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, + pipSize: json['pipSize'] as int? ?? 4, showLastIndicator: json['showLastIndicator'] as bool? ?? false, title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$WilliamsRIndicatorConfigToJson( diff --git a/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart b/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart index fde715e95..09cfef394 100644 --- a/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart +++ b/lib/src/add_ons/indicators_ui/zigzag_indicator/zigzag_indicator_config.g.dart @@ -14,7 +14,7 @@ ZigZagIndicatorConfig _$ZigZagIndicatorConfigFromJson( ? const LineStyle(thickness: 0.9, color: Colors.blue) : LineStyle.fromJson(json['lineStyle'] as Map), title: json['title'] as String?, - number: (json['number'] as num?)?.toInt() ?? 0, + number: json['number'] as int? ?? 0, ); Map _$ZigZagIndicatorConfigToJson( From 73b77b3a61379ff7169d68bff5eb1e3a86d752f7 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 14:34:46 +0800 Subject: [PATCH 241/311] add some doc --- .../interactable_drawings/drawing_v2.dart | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index eb53b5fac..44cf105f3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -76,6 +76,9 @@ abstract class DrawingV2 { ); /// Paints the drawing tool on the chart. + /// + /// Whatever that is painted here it will be in the chart's excluding Y-axis + /// area. void paint( Canvas canvas, Size size, @@ -87,7 +90,10 @@ abstract class DrawingV2 { GetDrawingState getDrawingState, ); - /// Paints the drawing tool on the chart. + /// Paints the drawing tool chart but over the Y-axis. + /// + /// This is useful for the drawing wants to paint something that should be + /// visible over the Y-axis, like a horizontal line or a label. void paintOverYAxis( Canvas canvas, Size size, From 5a373d65679a590fe861706f121f1f76b8bf1951 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 5 Jun 2025 14:39:23 +0800 Subject: [PATCH 242/311] fix lint warnings --- .../horizontal_line/horizontal_line_interactable_drawing.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 0ac0c3354..eaeaa5b2d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -13,7 +13,6 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawi import 'package:deriv_chart/src/models/axis_range.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/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; From 887464bad04ae2de039694a6b164de704c7a1cb3 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 6 Jun 2025 11:11:16 +0800 Subject: [PATCH 243/311] apply design on floating tool bar menu --- .../helpers/paint_helpers.dart | 3 +++ .../interactive_layer/interactive_layer.dart | 14 ------------- .../selected_drawing_floating_menu.dart | 20 ++++++++++++++----- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 9ee398bc8..8007071e8 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -220,6 +220,9 @@ void drawValueLabel({ rect.top + (rectHeight - textPainter.height) / 2, ), ); + + // hover for buttons + // change cursor stle when hover over grab } /// Returns a [TextPainter] for the given formatted value and color. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index c672d1b81..ae855cc68 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -82,8 +82,6 @@ class _InteractiveLayerState extends State { final Map _interactableDrawings = {}; - bool _drawingsInitialized = false; - /// Timers for debouncing repository updates /// /// We use a map to have one timer per each drawing tool config. This is @@ -111,18 +109,6 @@ class _InteractiveLayerState extends State { // Add new drawing if it doesn't exist final drawing = config.getInteractableDrawing(); _interactableDrawings[config.configId!] = drawing; - - if (_drawingsInitialized) { - widget.interactiveLayerBehaviour.updateStateTo( - InteractiveSelectedToolState( - selected: drawing, - interactiveLayerBehaviour: widget.interactiveLayerBehaviour, - ), - StateChangeAnimationDirection.forward, - ); - } else { - _drawingsInitialized = true; - } } } diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index c0d71a53f..1ce159244 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -120,9 +120,19 @@ class _SelectedDrawingFloatingMenuState onUpdate: widget.onUpdateDrawing, ); - Widget _buildRemoveButton(BuildContext context) => IconButton( - icon: const Icon(Icons.delete_outline), - color: Colors.red, - onPressed: () => widget.onRemoveDrawing(widget.drawing.config), - ); + Widget _buildRemoveButton(BuildContext context) => SizedBox( + width: 32, + height: 32, + child: TextButton( + child: const Icon(Icons.delete_outline), + style: TextButton.styleFrom( + foregroundColor: Colors.white38, + padding: const EdgeInsets.all(8), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(4), + ), + ), + onPressed: () => widget.onRemoveDrawing(widget.drawing.config), + ), + ); } From 5cbb8f722d30df23d0350016ec5d4560ef065ad4 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 6 Jun 2025 14:07:46 +0800 Subject: [PATCH 244/311] update toolbar based on design --- .../horizontal_line_interactable_drawing.dart | 61 +++++++++------ .../widgets/color_picker.dart | 77 +++++++++++++++++++ .../selected_drawing_floating_menu.dart | 20 +++-- 3 files changed, 126 insertions(+), 32 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index eaeaa5b2d..00173e425 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -2,7 +2,6 @@ import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart'; -import 'package:deriv_chart/src/add_ons/indicators_ui/widgets/color_selector.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'; @@ -10,6 +9,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/widgets/color_picker.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; @@ -251,31 +251,44 @@ class HorizontalLineInteractableDrawing @override Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => Row( children: [ - TextButton( - onPressed: () { - // update line thickness - }, - child: Text( - '${config.lineStyle.thickness}px', - style: const TextStyle(color: Colors.white), - textAlign: TextAlign.center, + _buildLineThicknessIcon(), + const SizedBox(width: 4), + _buildColorPickerIcon(onUpdate) + ], + ); + + Widget _buildColorPickerIcon(UpdateDrawingTool onUpdate) => SizedBox( + width: 44, + height: 44, + child: ColorPicker( + currentColor: config.lineStyle.color, + onColorChanged: (newColor) => onUpdate(config.copyWith( + lineStyle: config.lineStyle.copyWith(color: newColor), + labelStyle: config.labelStyle.copyWith(color: newColor), + )), + ), + ); + + Widget _buildLineThicknessIcon() => SizedBox( + width: 44, + height: 44, + child: TextButton( + style: TextButton.styleFrom( + foregroundColor: Colors.white38, + alignment: Alignment.center, + padding: const EdgeInsets.symmetric(), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(4), ), ), - SizedBox( - width: 16, - height: 16, - child: ColorSelector( - currentColor: config.lineStyle.color, - onColorChanged: (Color newColor) => onUpdate( - config.copyWith( - lineStyle: config.lineStyle.copyWith(color: newColor), - labelStyle: config.labelStyle.copyWith( - color: newColor, - ), - ), - ), - ), + onPressed: () { + // update line thickness + }, + child: Text( + '${config.lineStyle.thickness.toInt()}px', + style: const TextStyle(color: Colors.white), + textAlign: TextAlign.center, ), - ], + ), ); } diff --git a/lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart b/lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart new file mode 100644 index 000000000..6d1c9a910 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart @@ -0,0 +1,77 @@ +import 'package:flutter/material.dart'; + +import 'package:deriv_chart/src/widgets/color_picker/color_picker_sheet.dart'; + +/// Color picker widget. +class ColorPicker extends StatelessWidget { + /// Initializes + const ColorPicker({ + required this.currentColor, + required this.onColorChanged, + Key? key, + }) : super(key: key); + + /// Current color. + final Color currentColor; + + /// Will be called when a color is selected from [ColorPickerSheet]. + final ValueChanged onColorChanged; + + @override + Widget build(BuildContext context) => _ColorPickerIcon( + color: currentColor, + onTap: () { + showModalBottomSheet( + backgroundColor: Colors.transparent, + context: context, + builder: (BuildContext context) => ColorPickerSheet( + selectedColor: currentColor, + onChanged: onColorChanged, + ), + ); + }, + ); +} + +class _ColorPickerIcon extends StatelessWidget { + /// Creates a Color picker icon. + const _ColorPickerIcon({ + required this.color, + required this.onTap, + Key? key, + }) : super(key: key); + + /// Display color value. + final Color color; + + /// Tap callback. + final VoidCallback onTap; + + @override + Widget build(BuildContext context) => TextButton( + onPressed: onTap, + style: TextButton.styleFrom( + foregroundColor: Colors.white38, + alignment: Alignment.center, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(4), + ), + ), + child: SizedBox( + width: 32, + height: 32, + child: Center( + child: _buildColorBox(), + ), + ), + ); + + Container _buildColorBox() => Container( + width: 16, + height: 16, + decoration: BoxDecoration( + color: color, + borderRadius: BorderRadius.circular(4), + ), + ); +} diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 1ce159244..5462ad70e 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -106,8 +106,12 @@ class _SelectedDrawingFloatingMenuState padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), child: Row( children: [ - const Icon(Icons.drag_indicator), + const Icon( + Icons.drag_indicator, + color: Colors.white38, + ), _buildDrawingMenuOptions(), + const SizedBox(width: 4), _buildRemoveButton(context), ], ), @@ -121,18 +125,18 @@ class _SelectedDrawingFloatingMenuState ); Widget _buildRemoveButton(BuildContext context) => SizedBox( - width: 32, - height: 32, - child: TextButton( - child: const Icon(Icons.delete_outline), + width: 44, + height: 44, + child: TextButton( + child: const Icon(Icons.delete_outline, size: 24), style: TextButton.styleFrom( - foregroundColor: Colors.white38, - padding: const EdgeInsets.all(8), + foregroundColor: Colors.red, + alignment: Alignment.center, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(4), ), ), onPressed: () => widget.onRemoveDrawing(widget.drawing.config), ), - ); + ); } From c4ecd1815f2ee7b7061acdb9559153329e231331 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 6 Jun 2025 14:25:39 +0800 Subject: [PATCH 245/311] reset drawing preview after tools is added --- .../interactive_layer_states/interactive_adding_tool_state.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 1214d4cc7..8f4757cfb 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -146,6 +146,8 @@ class InteractiveAddingToolState extends InteractiveState ..clearAddingDrawing() ..addDrawing(_drawingPreview!.interactableDrawing.getUpdatedConfig()); + _drawingPreview = null; + interactiveLayerBehaviour.updateStateTo( InteractiveNormalState( interactiveLayerBehaviour: interactiveLayerBehaviour, From ad9e54cc1b326de6d95d4869d52b80fd65058388 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 6 Jun 2025 14:36:48 +0800 Subject: [PATCH 246/311] fix: fix issue of tool removing sometimes not working --- lib/src/add_ons/add_on_config.dart | 4 ++++ lib/src/add_ons/add_ons_repository.dart | 2 +- lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart | 5 +---- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/src/add_ons/add_on_config.dart b/lib/src/add_ons/add_on_config.dart index 7de0afa78..2b86be182 100644 --- a/lib/src/add_ons/add_on_config.dart +++ b/lib/src/add_ons/add_on_config.dart @@ -6,8 +6,12 @@ abstract class AddOnConfig with EquatableMixin { const AddOnConfig({ this.isOverlay = true, this.number = 0, + this.configId, }); + /// Drawing tool config id. + final String? configId; + /// Whether the add-on is an overlay on the main chart or displays on a /// separate chart. Default is set to `true`. final bool isOverlay; diff --git a/lib/src/add_ons/add_ons_repository.dart b/lib/src/add_ons/add_ons_repository.dart index 6fc50a480..f72f3d4c3 100644 --- a/lib/src/add_ons/add_ons_repository.dart +++ b/lib/src/add_ons/add_ons_repository.dart @@ -119,7 +119,7 @@ class AddOnsRepository extends ChangeNotifier @override void remove(T config) { - final index = items.indexOf(config); + final index = items.indexWhere((item) => item.configId == config.configId); if (index != -1) { removeAt(index); } diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index e854a7a49..c8ad786a3 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -12,7 +12,7 @@ import 'package:flutter/material.dart'; abstract class DrawingToolConfig extends AddOnConfig { /// Initializes const DrawingToolConfig({ - required this.configId, + required super.configId, required this.drawingData, // TODO(Bahar-Deriv): Move edgePoints to drawingData. required this.edgePoints, @@ -61,9 +61,6 @@ abstract class DrawingToolConfig extends AddOnConfig { /// Drawing tool edge points. final List edgePoints; - /// Drawing tool config id. - final String? configId; - /// Key of drawing tool name property in JSON. static const String nameKey = 'name'; From a34b2753b0934dbecab3ae48fa35d72f1986ed46 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 6 Jun 2025 15:30:33 +0800 Subject: [PATCH 247/311] fix: fix issue floating menu not dismissing if delete from outside menu --- .../interactive_layer/interactive_layer.dart | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index ae855cc68..e66865e86 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -24,6 +24,7 @@ import 'interaction_notifier.dart'; import 'interactive_layer_base.dart'; import 'enums/state_change_direction.dart'; import 'interactive_layer_behaviours/interactive_layer_behaviour.dart'; +import 'interactive_layer_states/interactive_normal_state.dart'; /// Interactive layer of the chart package where elements can be drawn and can /// be interacted with. @@ -112,8 +113,25 @@ class _InteractiveLayerState extends State { } } + bool anyToolRemoved = false; + // Remove drawings that are not in the config list - _interactableDrawings.removeWhere((id, _) => !configListIds.contains(id)); + _interactableDrawings.removeWhere((id, _) { + if (!configListIds.contains(id)) { + anyToolRemoved = true; + return true; + } + return false; + }); + + if (anyToolRemoved) { + widget.interactiveLayerBehaviour.updateStateTo( + InteractiveNormalState( + interactiveLayerBehaviour: widget.interactiveLayerBehaviour, + ), + StateChangeAnimationDirection.forward, + ); + } setState(() {}); } From c3cd6acd467f4fdb395cb6ba0ca0cc055c6ea324 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 6 Jun 2025 17:01:25 +0800 Subject: [PATCH 248/311] add animation for open/closing flaoting menu --- .../interactive_layer/interactive_layer.dart | 10 ++-- .../interactive_layer_behaviour.dart | 6 ++ .../interactive_normal_state.dart | 1 + .../selected_drawing_floating_menu.dart | 57 +++++++++++++------ 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index e66865e86..3747bddcf 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -282,16 +282,16 @@ class _InteractiveLayerGestureHandlerState void initState() { super.initState(); - widget.interactiveLayerBehaviour.init( - interactiveLayer: this, - onUpdate: () => setState(() {}), - ); - _stateChangeController = AnimationController( vsync: this, duration: const Duration(milliseconds: 240), ); + widget.interactiveLayerBehaviour.init( + interactiveLayer: this, + onUpdate: () => setState(() {}), + stateChangeController: _stateChangeController, + ); // register the callback context.read().registerCallback(onTap); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 0c4cfc17e..13bda9716 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -36,6 +36,9 @@ abstract class InteractiveLayerBehaviour { late final InteractiveLayerController _controller; + /// The controller for state changes in the interactive layer. + late final AnimationController stateChangeController; + /// The controller for the interactive layer. InteractiveLayerController get controller => _controller; @@ -54,11 +57,14 @@ abstract class InteractiveLayerBehaviour { void init({ required InteractiveLayerBase interactiveLayer, required VoidCallback onUpdate, + required AnimationController stateChangeController, }) { if (_initialized) { return; } + this.stateChangeController = stateChangeController; + _initialized = true; this.interactiveLayer = interactiveLayer; this.onUpdate = onUpdate; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart index 8375b907b..0fc7ffe66 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart @@ -68,6 +68,7 @@ class InteractiveNormalState extends InteractiveState interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, + waitForAnimation: false, ); } } diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 5462ad70e..99fa2e9af 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -41,11 +41,23 @@ class _SelectedDrawingFloatingMenuState Size _menuSize = Size.zero; late final InteractiveLayerController _controller; + late final Animation _scaleAnimation; + late final Animation _fadeAnimation; @override void initState() { super.initState(); _controller = widget.interactiveLayerBehaviour.controller; + _scaleAnimation = CurvedAnimation( + parent: Tween(begin: 0.8, end: 1) + .animate(widget.interactiveLayerBehaviour.stateChangeController), + curve: Curves.easeOut, + ); + + _fadeAnimation = CurvedAnimation( + parent: widget.interactiveLayerBehaviour.stateChangeController, + curve: Curves.easeOut, + ); // Schedule a post-frame callback to get the menu size WidgetsBinding.instance.addPostFrameCallback((_) { @@ -96,24 +108,35 @@ class _SelectedDrawingFloatingMenuState _controller.floatingMenuPosition = Offset(constrainedX, constrainedY); setState(() {}); }, - child: Container( - decoration: BoxDecoration( - // TODO(NA): use a color from theme when the theme specification in - // design documents has included the color for this menu. - color: CoreDesignTokens.coreColorSolidSlate1100, - borderRadius: BorderRadius.circular(8), + child: AnimatedBuilder( + animation: widget.interactiveLayerBehaviour.stateChangeController, + builder: (_, child) => FadeTransition( + opacity: _fadeAnimation, + child: ScaleTransition( + scale: _scaleAnimation, + alignment: Alignment.topCenter, + child: child, + ), ), - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), - child: Row( - children: [ - const Icon( - Icons.drag_indicator, - color: Colors.white38, - ), - _buildDrawingMenuOptions(), - const SizedBox(width: 4), - _buildRemoveButton(context), - ], + child: Container( + decoration: BoxDecoration( + // TODO(NA): use a color from theme when the theme specification in + // design documents has included the color for this menu. + color: CoreDesignTokens.coreColorSolidSlate1100, + borderRadius: BorderRadius.circular(8), + ), + padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), + child: Row( + children: [ + const Icon( + Icons.drag_indicator, + color: Colors.white38, + ), + _buildDrawingMenuOptions(), + const SizedBox(width: 4), + _buildRemoveButton(context), + ], + ), ), ), ), From 660d00a36cc8b4ab4903a210c111ad472bd8e535 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Fri, 6 Jun 2025 18:25:13 +0800 Subject: [PATCH 249/311] fix: label text not animating --- .../interactive_layer/helpers/paint_helpers.dart | 16 ++++++++++------ .../horizontal_line_interactable_drawing.dart | 7 +++---- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 8007071e8..5925f9431 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -168,6 +168,7 @@ void drawValueLabel({ required int pipSize, required Size size, required TextStyle textStyle, + double animationProgress = 1, Color color = Colors.white, Color backgroundColor = Colors.transparent, }) { @@ -178,8 +179,12 @@ void drawValueLabel({ final String formattedValue = value.toStringAsFixed(pipSize); // Create text painter to measure text dimensions - final TextPainter textPainter = - _getTextPainter(formattedValue, color, textStyle: textStyle)..layout(); + final TextPainter textPainter = _getTextPainter( + formattedValue, + textStyle: textStyle.copyWith( + color: textStyle.color?.withOpacity(animationProgress), + ), + )..layout(); // Create rectangle with padding around the text final double rectWidth = textPainter.width + 24; @@ -197,11 +202,11 @@ void drawValueLabel({ // Draw rounded rectangle final Paint rectPaint = Paint() - ..color = backgroundColor + ..color = backgroundColor.withOpacity(animationProgress) ..style = PaintingStyle.fill; final Paint borderPaint = Paint() - ..color = color + ..color = color.withOpacity(animationProgress) ..style = PaintingStyle.stroke ..strokeWidth = 1.0; @@ -227,8 +232,7 @@ void drawValueLabel({ /// Returns a [TextPainter] for the given formatted value and color. TextPainter _getTextPainter( - String formattedValue, - Color color, { + String formattedValue, { TextStyle textStyle = const TextStyle( color: Colors.white38, fontSize: 14, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 00173e425..c40fb8837 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -162,12 +162,11 @@ class HorizontalLineInteractableDrawing quoteToY: quoteToY, value: startPoint!.quote, pipSize: chartConfig.pipSize, + animationProgress: animationInfo.stateChangePercent, size: size, textStyle: config.labelStyle, - color: config.lineStyle.color - .withOpacity(animationInfo.stateChangePercent), - backgroundColor: chartTheme.backgroundColor - .withOpacity(animationInfo.stateChangePercent), + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, ); } } From d141e726e73b9040b1b4297ab7e15cd617335369 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 10:32:03 +0800 Subject: [PATCH 250/311] chore: code cleanup: --- .../interactive_layer/interactive_layer.dart | 23 +++++++++++++++---- .../interactive_layer_base.dart | 5 +++- .../interactive_layer_behaviour.dart | 12 +++++----- .../interactive_adding_tool_state.dart | 13 ++++++++--- 4 files changed, 38 insertions(+), 15 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 3747bddcf..368a07f2a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -332,16 +332,29 @@ class _InteractiveLayerGestureHandlerState @override Future animateStateChange( - StateChangeAnimationDirection direction) async { - await _runAnimation(direction); + StateChangeAnimationDirection direction, { + bool animate = true, + }) async { + await _runAnimation(direction, animate); } - Future _runAnimation(StateChangeAnimationDirection direction) async { + Future _runAnimation( + StateChangeAnimationDirection direction, + bool animate, + ) async { if (direction == StateChangeAnimationDirection.forward) { _stateChangeController.reset(); - await _stateChangeController.forward(); + if (animate) { + await _stateChangeController.forward(); + } else { + _stateChangeController.value = 1.0; + } } else { - await _stateChangeController.reverse(from: 1); + if (animate) { + await _stateChangeController.reverse(from: 1); + } else { + _stateChangeController.value = 0.0; + } } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 1d7c11647..063c3dd53 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -19,7 +19,10 @@ abstract class InteractiveLayerBase { /// and from [InteractiveSelectedToolState] to [InteractiveNormalState] can be /// backward. so the [InteractiveLayerBase] can animate the transition /// accordingly. - Future animateStateChange(StateChangeAnimationDirection direction); + Future animateStateChange( + StateChangeAnimationDirection direction, { + bool animate = true, + }); /// The drawings of the interactive layer. List> get drawings; diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index 13bda9716..d40ee37e5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -91,12 +91,11 @@ abstract class InteractiveLayerBehaviour { bool waitForAnimation = true, bool animate = true, }) async { - if (animate) { - if (waitForAnimation) { - await interactiveLayer.animateStateChange(direction); - } else { - unawaited(interactiveLayer.animateStateChange(direction)); - } + if (waitForAnimation) { + await interactiveLayer.animateStateChange(direction, animate: animate); + } else { + unawaited( + interactiveLayer.animateStateChange(direction, animate: animate)); } _controller.currentState = newState; @@ -125,6 +124,7 @@ abstract class InteractiveLayerBehaviour { interactiveLayerBehaviour: this, ), StateChangeAnimationDirection.forward, + animate: false, ); /// The drawings of the interactive layer. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 8f4757cfb..6fffbf7a9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -7,6 +7,7 @@ import '../interactable_drawings/drawing_v2.dart'; import '../enums/state_change_direction.dart'; import 'interactive_hover_state.dart'; import 'interactive_normal_state.dart'; +import 'interactive_selected_tool_state.dart'; import 'interactive_state.dart'; /// The state of the interactive layer when a tool is being added. @@ -146,14 +147,20 @@ class InteractiveAddingToolState extends InteractiveState ..clearAddingDrawing() ..addDrawing(_drawingPreview!.interactableDrawing.getUpdatedConfig()); - _drawingPreview = null; - + // Update the state to selected tool state with the newly added drawing. + // + // Once we have saved the drawing config in [AddOnsRepository] we should + // update to selected state with the interactable drawing that comes from + // that configs and not the preview one. interactiveLayerBehaviour.updateStateTo( - InteractiveNormalState( + InteractiveSelectedToolState( + selected: _drawingPreview!.interactableDrawing, interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, ); }); + + _drawingPreview = null; } } From 44301aefa8bb59d6c230321c61a73e5d4af1b9be Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 11:17:10 +0800 Subject: [PATCH 251/311] chore: add a comment --- .../interactable_drawings/interactable_drawing.dart | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index dbaae9140..75284d891 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -49,9 +49,10 @@ abstract class InteractableDrawing /// Returns the widget for the toolbar menu of the drawing tool. /// [config] is the current configuration of the drawing tool. - Widget getToolBarMenu({ - required UpdateDrawingTool onUpdate, - }) { + /// + /// The [onUpdate] callback is called when the user updates the drawing tool + /// configuration through the toolbar menu. + Widget getToolBarMenu({required UpdateDrawingTool onUpdate}) { final toolBar = buildDrawingToolBarMenu((config) { _prevConfig = this.config; this.config = config as T; From 360a2f2a19ed5bf78ff436f3366f49f39dc08135 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 11:49:16 +0800 Subject: [PATCH 252/311] code cleanup :recycle: --- .../trend_line/trend_line_interactable_drawing.dart | 5 ++--- .../interactive_adding_tool_state.dart | 4 ++-- .../interactive_selected_tool_state.dart | 4 ++++ 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index ad20a01c6..fbdf5f170 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -357,7 +357,6 @@ class TrendLineInteractableDrawing ); @override - Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) { - throw UnimplementedError(); - } + Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => + const Text('[Trend Line Options]'); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 6fffbf7a9..5fb64354a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -159,8 +159,8 @@ class InteractiveAddingToolState extends InteractiveState ), StateChangeAnimationDirection.forward, ); - }); - _drawingPreview = null; + _drawingPreview = null; + }); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index ef16ce553..5cfde3b89 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -150,6 +150,10 @@ class InteractiveSelectedToolState extends InteractiveState ); }, onRemoveDrawing: (config) { + if (selected.id != config.configId) { + return; + } + interactiveLayer.removeDrawing(config); interactiveLayerBehaviour.updateStateTo( From 942acd569808dc390463c9133604d89a188399ca Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 13:25:18 +0800 Subject: [PATCH 253/311] fix issue tool not following when you select and drag in one move --- .../interactive_layer_states/interactive_normal_state.dart | 1 + .../interactive_selected_tool_state.dart | 1 + 2 files changed, 2 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart index 0fc7ffe66..ccddb64c7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart @@ -44,6 +44,7 @@ class InteractiveNormalState extends InteractiveState interactiveLayerBehaviour.updateStateTo( newState, StateChangeAnimationDirection.forward, + waitForAnimation: false ); newState.onPanStart(details); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 5cfde3b89..89e18d97c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -92,6 +92,7 @@ class InteractiveSelectedToolState extends InteractiveState interactiveLayerBehaviour: interactiveLayerBehaviour, )..onPanStart(details), StateChangeAnimationDirection.forward, + waitForAnimation: false, ); } } From 822a0b48c64527ac6cdb8103ca9209ad4c50b217 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 13:34:58 +0800 Subject: [PATCH 254/311] dispose contollers in interactive_layer.dart --- .../deriv_chart/interactive_layer/interactive_layer.dart | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 368a07f2a..9c380ee71 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -505,4 +505,11 @@ class _InteractiveLayerGestureHandlerState @override Size? get layerSize => _size; + + @override + void dispose() { + _interactionNotifier.dispose(); + _stateChangeController.dispose(); + super.dispose(); + } } From d578f2bbe346cb0df342a270e669b4082520467a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 13:45:33 +0800 Subject: [PATCH 255/311] minor change --- .../interactive_selected_tool_state.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 89e18d97c..10a1d5787 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -155,8 +155,6 @@ class InteractiveSelectedToolState extends InteractiveState return; } - interactiveLayer.removeDrawing(config); - interactiveLayerBehaviour.updateStateTo( InteractiveNormalState( interactiveLayerBehaviour: interactiveLayerBehaviour, @@ -164,6 +162,8 @@ class InteractiveSelectedToolState extends InteractiveState StateChangeAnimationDirection.backward, waitForAnimation: false, ); + + interactiveLayer.removeDrawing(config); }, ); } From 8b956856b764e215001a0da7d68d3759b0d66b73 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 14:38:59 +0800 Subject: [PATCH 256/311] fix formatting --- .../interactive_layer_states/interactive_normal_state.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart index ccddb64c7..2cd3e4491 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_normal_state.dart @@ -44,7 +44,7 @@ class InteractiveNormalState extends InteractiveState interactiveLayerBehaviour.updateStateTo( newState, StateChangeAnimationDirection.forward, - waitForAnimation: false + waitForAnimation: false, ); newState.onPanStart(details); From ca7a9b9812b0043ea3879501d5d23c3b200fd966 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 15:05:06 +0800 Subject: [PATCH 257/311] prevent re-selecting the tool which is already selected --- .../interactive_selected_tool_state.dart | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 10a1d5787..252f351b5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -116,6 +116,11 @@ class InteractiveSelectedToolState extends InteractiveState final InteractableDrawing? hitDrawing = anyDrawingHit(details.localPosition); + if (hitDrawing?.id == selected.id) { + // If the tapped drawing is the same as the selected one, do nothing. + return; + } + if (hitDrawing != null) { // when a tool is tap/hit, keep selected state. it might be the same // tool or a different tool. From d017e4fc07e69d158b24f3e4c7c4caf1d7227737 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 15:06:13 +0800 Subject: [PATCH 258/311] make switching to different selected tools smooth --- .../interactive_selected_tool_state.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 252f351b5..14538e95c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -130,6 +130,7 @@ class InteractiveSelectedToolState extends InteractiveState interactiveLayerBehaviour: interactiveLayerBehaviour, ), StateChangeAnimationDirection.forward, + waitForAnimation: false, ); } else { // If tap is on empty space, return to normal state. From 87a15d9ac7c8e12366edec586ae0327faba9e47a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 15:30:20 +0800 Subject: [PATCH 259/311] don't animate the other tool if we switch the selected tool --- .../interactive_selected_tool_state.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 14538e95c..9a53ee4c5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -131,6 +131,7 @@ class InteractiveSelectedToolState extends InteractiveState ), StateChangeAnimationDirection.forward, waitForAnimation: false, + animate: false, ); } else { // If tap is on empty space, return to normal state. From 8fc71ffe001b95cd8a9557a7e41a9c521c052798 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 16:03:09 +0800 Subject: [PATCH 260/311] update horizontal line painting based on design --- .../horizontal/horizontal_drawing_tool_config.dart | 9 ++++----- .../interactive_layer/helpers/paint_helpers.dart | 2 +- .../horizontal_line_interactable_drawing.dart | 7 ++----- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index 882c8749e..a54317b05 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -6,6 +6,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/drawing_data.dart'; import 'package:deriv_chart/src/deriv_chart/chart/helpers/text_style_json_converter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart'; +import 'package:deriv_chart/src/theme/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:deriv_chart/src/theme/text_styles.dart'; import 'package:flutter/material.dart'; @@ -23,13 +24,11 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { String? configId, DrawingData? drawingData, List edgePoints = const [], - this.lineStyle = const LineStyle(color: Colors.white), + this.lineStyle = + const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700), this.labelStyle = const TextStyle( - color: Colors.white, + color: CoreDesignTokens.coreColorSolidBlue700, fontSize: 12, - fontStyle: FontStyle.normal, - fontWeight: FontWeight.w600, - height: 1.67, // lineHeight (20px) / fontSize (12px) = 1.67 ), this.pattern = DrawingPatterns.solid, this.enableLabel = true, diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 5925f9431..ff607b8f7 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -188,7 +188,7 @@ void drawValueLabel({ // Create rectangle with padding around the text final double rectWidth = textPainter.width + 24; - const double rectHeight = 30; // Fixed height to match the image + const double rectHeight = 24; // Fixed height to match the image final double rectRight = size.width; final double rectLeft = rectRight - rectWidth; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index c40fb8837..c514ec278 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -109,11 +109,8 @@ class HorizontalLineInteractableDrawing Offset(size.width, quoteToY(startPoint!.quote)); // End at right edge // Use glowy paint style if selected, otherwise use normal paint style - final Paint paint = drawingState.contains(DrawingToolState.selected) || - drawingState.contains(DrawingToolState.dragging) - ? paintStyle.linePaintStyle( - lineStyle.color, 1 + 1 * animationInfo.stateChangePercent) - : paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); + final Paint paint = + paintStyle.linePaintStyle(lineStyle.color, lineStyle.thickness); canvas.drawLine(startOffset, endOffset, paint); From 51f9f0197fcb79d76c9cbd2d93be2da0cf3cd76d Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Mon, 9 Jun 2025 17:24:33 +0800 Subject: [PATCH 261/311] code cleanup :recycle: --- .../horizontal_line_interactable_drawing.dart | 16 +++++++++---- .../widgets/color_picker.dart | 5 ++-- .../selected_drawing_floating_menu.dart | 23 +++++++++++++------ 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index c514ec278..ec5abcb34 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -13,6 +13,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/widgets/color_pick import 'package:deriv_chart/src/models/axis_range.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/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; @@ -254,8 +255,8 @@ class HorizontalLineInteractableDrawing ); Widget _buildColorPickerIcon(UpdateDrawingTool onUpdate) => SizedBox( - width: 44, - height: 44, + width: 32, + height: 32, child: ColorPicker( currentColor: config.lineStyle.color, onColorChanged: (newColor) => onUpdate(config.copyWith( @@ -266,8 +267,8 @@ class HorizontalLineInteractableDrawing ); Widget _buildLineThicknessIcon() => SizedBox( - width: 44, - height: 44, + width: 32, + height: 32, child: TextButton( style: TextButton.styleFrom( foregroundColor: Colors.white38, @@ -282,7 +283,12 @@ class HorizontalLineInteractableDrawing }, child: Text( '${config.lineStyle.thickness.toInt()}px', - style: const TextStyle(color: Colors.white), + style: const TextStyle( + fontSize: 14, + color: CoreDesignTokens.coreColorSolidSlate50, + fontWeight: FontWeight.normal, + height: 2, + ), textAlign: TextAlign.center, ), ), diff --git a/lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart b/lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart index 6d1c9a910..7c360484e 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/color_picker.dart @@ -52,6 +52,7 @@ class _ColorPickerIcon extends StatelessWidget { onPressed: onTap, style: TextButton.styleFrom( foregroundColor: Colors.white38, + padding: const EdgeInsets.all(0), alignment: Alignment.center, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(4), @@ -67,8 +68,8 @@ class _ColorPickerIcon extends StatelessWidget { ); Container _buildColorBox() => Container( - width: 16, - height: 16, + width: 14, + height: 14, decoration: BoxDecoration( color: color, borderRadius: BorderRadius.circular(4), diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 99fa2e9af..70240865f 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -7,6 +7,7 @@ import 'package:flutter/material.dart'; import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; import '../interactive_layer_controller.dart'; +// TODO(NA): get the colors and dimensions from the [ChartTheme]. /// A floating menu that appears when a drawing is selected. class SelectedDrawingFloatingMenu extends StatefulWidget { /// Creates a floating menu for the selected drawing. @@ -128,10 +129,7 @@ class _SelectedDrawingFloatingMenuState padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), child: Row( children: [ - const Icon( - Icons.drag_indicator, - color: Colors.white38, - ), + _buildDragIcon(), _buildDrawingMenuOptions(), const SizedBox(width: 4), _buildRemoveButton(context), @@ -143,18 +141,29 @@ class _SelectedDrawingFloatingMenuState ); } + Widget _buildDragIcon() => SizedBox( + width: 32, + height: 32, + child: Icon( + Icons.drag_indicator, + size: 18, + color: CoreDesignTokens.coreColorSolidSlate50.withOpacity(0.4), + ), + ); + Widget _buildDrawingMenuOptions() => widget.drawing.getToolBarMenu( onUpdate: widget.onUpdateDrawing, ); Widget _buildRemoveButton(BuildContext context) => SizedBox( - width: 44, - height: 44, + width: 32, + height: 32, child: TextButton( - child: const Icon(Icons.delete_outline, size: 24), + child: const Icon(Icons.delete_outline, size: 18), style: TextButton.styleFrom( foregroundColor: Colors.red, alignment: Alignment.center, + padding: const EdgeInsets.all(0), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(4), ), From e9142cbf67465c491f243d222a0b43f0afcca3a8 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 11 Jun 2025 13:52:34 +0800 Subject: [PATCH 262/311] add neon effect to label as well --- .../helpers/paint_helpers.dart | 24 +++++++++++++++---- .../horizontal_line_interactable_drawing.dart | 1 + 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index ff607b8f7..9eb7a484b 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -161,6 +161,7 @@ class CircularIntervalList { /// /// This draws a rounded rectangle with the formatted value inside it. /// The value is formatted according to the provided pip size. +/// If [addNeonEffect] is true, it will add a neon glow effect around the label. void drawValueLabel({ required Canvas canvas, required QuoteToY quoteToY, @@ -171,6 +172,10 @@ void drawValueLabel({ double animationProgress = 1, Color color = Colors.white, Color backgroundColor = Colors.transparent, + bool addNeonEffect = false, + double neonOpacity = 0.4, + double neonStrokeWidth = 8, + double neonBlurRadius = 6, }) { // Calculate Y position based on the value final double yPosition = quoteToY(value); @@ -200,6 +205,20 @@ void drawValueLabel({ yPosition + rectHeight / 2, ); + final RRect roundedRect = + RRect.fromRectAndRadius(rect, const Radius.circular(4)); + + // Draw neon effect if requested + if (addNeonEffect) { + final Paint neonPaint = Paint() + ..color = color.withOpacity(neonOpacity) + ..strokeWidth = neonStrokeWidth * animationProgress + ..style = PaintingStyle.stroke + ..maskFilter = MaskFilter.blur(BlurStyle.normal, neonBlurRadius); + + canvas.drawRRect(roundedRect, neonPaint); + } + // Draw rounded rectangle final Paint rectPaint = Paint() ..color = backgroundColor.withOpacity(animationProgress) @@ -211,8 +230,6 @@ void drawValueLabel({ ..strokeWidth = 1.0; // Draw the background and border - final RRect roundedRect = - RRect.fromRectAndRadius(rect, const Radius.circular(4)); canvas ..drawRRect(roundedRect, rectPaint) ..drawRRect(roundedRect, borderPaint); @@ -225,9 +242,6 @@ void drawValueLabel({ rect.top + (rectHeight - textPainter.height) / 2, ), ); - - // hover for buttons - // change cursor stle when hover over grab } /// Returns a [TextPainter] for the given formatted value and color. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index ec5abcb34..f190317f4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -165,6 +165,7 @@ class HorizontalLineInteractableDrawing textStyle: config.labelStyle, color: config.lineStyle.color, backgroundColor: chartTheme.backgroundColor, + addNeonEffect: true, ); } } From f82d755cf4abf529f49bebadbb5869b7258fef2f Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 11 Jun 2025 14:23:23 +0800 Subject: [PATCH 263/311] fix delay when adding preview appears --- .../interactive_layer_behaviour.dart | 2 ++ .../interactive_layer_mobile_behaviour.dart | 2 ++ 2 files changed, 4 insertions(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart index d40ee37e5..1ea1a6fb6 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart @@ -108,6 +108,8 @@ abstract class InteractiveLayerBehaviour { updateStateTo( InteractiveAddingToolState(drawingTool, interactiveLayerBehaviour: this), StateChangeAnimationDirection.forward, + animate: false, + waitForAnimation: false, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart index 1a5dc73f6..82bf3a29c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart @@ -21,6 +21,8 @@ class InteractiveLayerMobileBehaviour extends InteractiveLayerBehaviour { updateStateTo( newState, StateChangeAnimationDirection.backward, + waitForAnimation: false, + animate: false, ); } From 0decbc2c31999dcb9e5cdfb2f2d3e64bb249b2db Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 11 Jun 2025 14:32:51 +0800 Subject: [PATCH 264/311] don't animate even when switching selected tool on panStart --- .../interactive_selected_tool_state.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart index 9a53ee4c5..19179c18c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart @@ -93,6 +93,7 @@ class InteractiveSelectedToolState extends InteractiveState )..onPanStart(details), StateChangeAnimationDirection.forward, waitForAnimation: false, + animate: false, ); } } From 54b8d32d9e21d7d9d71e6558035a29e5b03f5987 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 11 Jun 2025 18:36:39 +0800 Subject: [PATCH 265/311] provide size as context to drawings --- .../drawing_tools_ui/drawing_tool_config.dart | 10 ++++++++- .../horizontal_drawing_tool_config.dart | 9 +++++++- .../line/line_drawing_tool_config.dart | 10 ++++++++- .../interactive_layer/drawing_context.dart | 21 ++++++++++++++++++ .../interactive_layer/helpers/types.dart | 7 ++++++ .../interactable_drawing_custom_painter.dart | 6 +---- .../drawing_adding_preview.dart | 2 +- .../interactable_drawings/drawing_v2.dart | 2 +- ...orizontal_line_adding_preview_desktop.dart | 2 +- ...horizontal_line_adding_preview_mobile.dart | 4 ++-- .../horizontal_line_interactable_drawing.dart | 4 +++- .../interactable_drawing.dart | 19 ++++++++++++++-- .../adding_tool_alignment_cross_hair.dart | 2 +- .../trend_line_adding_preview_desktop.dart | 1 + .../trend_line_adding_preview_mobile.dart | 4 ++-- .../trend_line_interactable_drawing.dart | 4 +++- .../interactive_layer/interactive_layer.dart | 22 ++++++++++++++----- .../interactive_layer_base.dart | 3 ++- .../interactive_adding_tool_state.dart | 8 +++++-- 19 files changed, 111 insertions(+), 29 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/drawing_context.dart create mode 100644 lib/src/deriv_chart/interactive_layer/helpers/types.dart diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart index c8ad786a3..17484e7df 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tool_config.dart @@ -5,6 +5,8 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/data_model/point.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:flutter/material.dart'; /// Drawing tools config @@ -68,7 +70,13 @@ abstract class DrawingToolConfig extends AddOnConfig { static String configIdKey = 'configId'; /// Returns back the [InteractableDrawing] instance of this drawing tool. - InteractableDrawing getInteractableDrawing() { + /// + /// [getDrawingState] is a callback that returns the current state of a + /// [InteractableDrawing]. + InteractableDrawing getInteractableDrawing( + DrawingContext drawingContext, + GetDrawingState getDrawingState, + ) { throw UnimplementedError('getInteractableDrawing() is not implemented.'); } diff --git a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart index a54317b05..c46a89812 100644 --- a/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/horizontal/horizontal_drawing_tool_config.dart @@ -5,6 +5,8 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/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/horizontal_line/horizontal_line_interactable_drawing.dart'; import 'package:deriv_chart/src/theme/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; @@ -98,13 +100,18 @@ class HorizontalDrawingToolConfig extends DrawingToolConfig { ); @override - HorizontalLineInteractableDrawing getInteractableDrawing() { + HorizontalLineInteractableDrawing getInteractableDrawing( + DrawingContext drawingContext, + GetDrawingState getDrawingState, + ) { final EdgePoint? startPoint = edgePoints.isNotEmpty ? edgePoints.first : null; return HorizontalLineInteractableDrawing( config: this, startPoint: startPoint, + drawingContext: drawingContext, + getDrawingState: getDrawingState, ); } } diff --git a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart index efd4e0a18..05dd001f6 100644 --- a/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/line/line_drawing_tool_config.dart @@ -6,6 +6,8 @@ import 'package:deriv_chart/src/add_ons/drawing_tools_ui/line/line_drawing_tool_ 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/data_model/point.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:flutter/foundation.dart' show kIsWeb; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; @@ -101,10 +103,16 @@ class LineDrawingToolConfig extends DrawingToolConfig { } @override - InteractableDrawing getInteractableDrawing() => TrendLineInteractableDrawing( + InteractableDrawing getInteractableDrawing( + DrawingContext drawingContext, + GetDrawingState getDrawingState, + ) => + TrendLineInteractableDrawing( config: this, // TODO(NA): improve the logic. startPoint: edgePoints.isNotEmpty ? edgePoints.first : null, endPoint: edgePoints.isNotEmpty ? edgePoints.last : null, + drawingContext: drawingContext, + getDrawingState: getDrawingState, ); } diff --git a/lib/src/deriv_chart/interactive_layer/drawing_context.dart b/lib/src/deriv_chart/interactive_layer/drawing_context.dart new file mode 100644 index 000000000..eccb96e65 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/drawing_context.dart @@ -0,0 +1,21 @@ +import 'dart:ui'; + +import 'package:deriv_chart/deriv_chart.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_base.dart'; + +/// The Interactive layer context for any [DrawingV2] that is being shown on the +/// layer. +class DrawingContext { + /// Initializes the [DrawingContext]. + DrawingContext({ + required this.fullSize, + required this.contentSize, + }); + + /// The full size of the chart layer that [InteractiveLayerBase] can show + /// drawings on it. + final Size fullSize; + + /// The size of the content area of the chart layer excluding the Y-axis. + final Size contentSize; +} diff --git a/lib/src/deriv_chart/interactive_layer/helpers/types.dart b/lib/src/deriv_chart/interactive_layer/helpers/types.dart new file mode 100644 index 000000000..6b2045520 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/helpers/types.dart @@ -0,0 +1,7 @@ +import '../enums/drawing_tool_state.dart'; +import '../interactable_drawings/drawing_v2.dart'; + +/// A callback which calling it should return if the [drawing] is selected. +typedef GetDrawingState = Set Function( + DrawingV2 drawing, +); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index 3a2e510c3..bfcf9c26b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -12,11 +12,7 @@ import '../chart/data_visualization/drawing_tools/ray/ray_line_drawing.dart'; import '../chart/data_visualization/models/animation_info.dart'; import '../chart/y_axis/y_axis_config.dart'; import 'enums/drawing_tool_state.dart'; - -/// A callback which calling it should return if the [drawing] is selected. -typedef GetDrawingState = Set Function( - DrawingV2 drawing, -); +import 'helpers/types.dart'; /// Interactable drawing custom painter. class InteractableDrawingCustomPainter extends CustomPainter { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart index 0637a00ac..5769b020c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart @@ -11,7 +11,7 @@ import 'package:flutter/gestures.dart'; import 'package:flutter/rendering.dart'; import '../enums/drawing_tool_state.dart'; -import '../interactable_drawing_custom_painter.dart'; +import '../helpers/types.dart'; import '../interactive_layer_behaviours/interactive_layer_behaviour.dart'; /// A preview of a drawing that is being added to the [InteractiveLayer]. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart index 44cf105f3..34b20ee22 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/drawing_v2.dart @@ -8,7 +8,7 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; import '../enums/drawing_tool_state.dart'; -import '../interactable_drawing_custom_painter.dart'; +import '../helpers/types.dart'; /// The margin for hit testing. const double hitTestMargin = 32; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart index afb46349f..6eeb1ff73 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart @@ -9,7 +9,7 @@ import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; import '../../helpers/paint_helpers.dart'; -import '../../interactable_drawing_custom_painter.dart'; +import '../../helpers/types.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart index f9dee6892..c6013c030 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_mobile.dart @@ -8,7 +8,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_ import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; -import '../../interactable_drawing_custom_painter.dart'; +import '../../helpers/types.dart'; import '../drawing_adding_preview.dart'; import 'horizontal_line_interactable_drawing.dart'; @@ -24,7 +24,7 @@ class HorizontalLineAddingPreviewMobile }) { if (interactableDrawing.startPoint == null) { final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; - final Size? layerSize = interactiveLayer.layerSize; + final Size? layerSize = interactiveLayer.drawingContext.fullSize; final double centerX = layerSize != null ? layerSize.width / 2 : 0; final double centerY = layerSize != null ? layerSize.height / 2 : 0; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index f190317f4..0cfc2554b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -6,7 +6,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data. 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/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_adding_preview_desktop.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/widgets/color_picker.dart'; @@ -20,6 +19,7 @@ import 'package:flutter/material.dart'; import '../../enums/drawing_tool_state.dart'; import '../../helpers/paint_helpers.dart'; +import '../../helpers/types.dart'; import '../../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import '../../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import '../drawing_v2.dart'; @@ -33,6 +33,8 @@ class HorizontalLineInteractableDrawing HorizontalLineInteractableDrawing({ required HorizontalDrawingToolConfig config, required this.startPoint, + required super.drawingContext, + required super.getDrawingState, }) : super(drawingConfig: config); /// Start point of the line. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart index 75284d891..8c98f36cb 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/interactable_drawing.dart @@ -8,8 +8,9 @@ import 'package:flutter/widgets.dart'; import '../../chart/data_visualization/chart_data.dart'; import '../../chart/data_visualization/models/animation_info.dart'; +import '../drawing_context.dart'; import '../enums/drawing_tool_state.dart'; -import '../interactable_drawing_custom_painter.dart'; +import '../helpers/types.dart'; import '../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import '../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'drawing_adding_preview.dart'; @@ -26,7 +27,11 @@ import 'drawing_v2.dart'; abstract class InteractableDrawing implements DrawingV2 { /// Initializes [InteractableDrawing]. - InteractableDrawing({required T drawingConfig}) { + InteractableDrawing({ + required T drawingConfig, + required this.drawingContext, + required this.getDrawingState, + }) { config = drawingConfig.copyWith() as T; _prevConfig = config.copyWith() as T; } @@ -44,6 +49,15 @@ abstract class InteractableDrawing /// config comparisons. late T _prevConfig; + /// A callback to get the updated state of any drawing tool when calling it. + final DrawingContext drawingContext; + + /// A callback to get the current state of a drawing. + final GetDrawingState getDrawingState; + + /// Returns the current state of this drawing tool. + Set get state => getDrawingState(this); + /// Returns the updated config. T getUpdatedConfig(); @@ -129,6 +143,7 @@ abstract class InteractableDrawing AnimationInfo animationInfo, ChartConfig chartConfig, ChartTheme chartTheme, + // TODO(NA): remove this and use instance state getter directly. GetDrawingState getDrawingState, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart index c44fddb27..30b83b34f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/adding_tool_alignment_cross_hair.dart @@ -9,7 +9,7 @@ import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; import '../../helpers/paint_helpers.dart'; -import '../../interactable_drawing_custom_painter.dart'; +import '../../helpers/types.dart'; import '../drawing_v2.dart'; /// A cross-hair used for aligning the adding tool. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index f3f3c6856..c7e991142 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -12,6 +12,7 @@ import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; +import '../../helpers/types.dart'; import '../drawing_adding_preview.dart'; import 'adding_tool_alignment_cross_hair.dart'; import 'trend_line_interactable_drawing.dart'; diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart index dace7f584..7ec97866b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_mobile.dart @@ -12,7 +12,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import '../../helpers/paint_helpers.dart'; -import '../../interactable_drawing_custom_painter.dart'; +import '../../helpers/types.dart'; import '../drawing_adding_preview.dart'; import '../drawing_v2.dart'; import 'trend_line_interactable_drawing.dart'; @@ -28,7 +28,7 @@ class TrendLineAddingPreviewMobile }) { if (interactableDrawing.startPoint == null) { final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; - final Size size = interactiveLayer.layerSize!; + final Size size = interactiveLayer.drawingContext.fullSize; final bottomLeftCenter = Offset(size.width / 4, size.height * 3 / 4); final topRightCenter = Offset(size.width * 3 / 4, size.height / 4); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index fbdf5f170..e4245d7fb 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -14,7 +14,7 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/widgets.dart'; import '../../helpers/paint_helpers.dart'; -import '../../interactable_drawing_custom_painter.dart'; +import '../../helpers/types.dart'; import '../../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import '../../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import '../drawing_adding_preview.dart'; @@ -31,6 +31,8 @@ class TrendLineInteractableDrawing required LineDrawingToolConfig config, required this.startPoint, required this.endPoint, + required super.drawingContext, + required super.getDrawingState, }) : super(drawingConfig: config); // TODO(Ramin): make it non-nullable. diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 9c380ee71..97adca53c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/multiple_animated_builder.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/drawing_context.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -108,7 +109,10 @@ class _InteractiveLayerState extends State { for (final config in widget.drawingToolsRepo.items) { if (!_interactableDrawings.containsKey(config.configId)) { // Add new drawing if it doesn't exist - final drawing = config.getInteractableDrawing(); + final drawing = config.getInteractableDrawing( + widget.interactiveLayerBehaviour.interactiveLayer.drawingContext, + widget.interactiveLayerBehaviour.getToolState, + ); _interactableDrawings[config.configId!] = drawing; } } @@ -276,7 +280,10 @@ class _InteractiveLayerGestureHandlerState AnimationController? get stateChangeAnimationController => _stateChangeController; - Size? _size; + DrawingContext _drawingContext = DrawingContext( + fullSize: Size.zero, + contentSize: Size.zero, + ); @override void initState() { @@ -362,7 +369,10 @@ class _InteractiveLayerGestureHandlerState Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); return LayoutBuilder(builder: (_, BoxConstraints constraints) { - _size = Size(constraints.maxWidth, constraints.maxHeight); + _drawingContext = DrawingContext( + fullSize: Size(constraints.maxWidth, constraints.maxHeight), + contentSize: Size(constraints.maxWidth, constraints.maxHeight), + ); return MouseRegion( onHover: (event) { @@ -503,13 +513,13 @@ class _InteractiveLayerGestureHandlerState void removeDrawing(DrawingToolConfig drawing) => widget.onRemoveDrawing?.call(drawing); - @override - Size? get layerSize => _size; - @override void dispose() { _interactionNotifier.dispose(); _stateChangeController.dispose(); super.dispose(); } + + @override + DrawingContext get drawingContext => _drawingContext; } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart index 063c3dd53..9297308fb 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_base.dart @@ -1,6 +1,7 @@ import 'dart:async'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/drawing_context.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:flutter/animation.dart'; @@ -44,7 +45,7 @@ abstract class InteractiveLayerBase { QuoteToY get quoteToY; /// The size of the interactive layer. - Size? get layerSize; + DrawingContext get drawingContext; /// Clears the adding drawing. void clearAddingDrawing(); diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart index 5fb64354a..5aff61866 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart @@ -31,8 +31,12 @@ class InteractiveAddingToolState extends InteractiveState this.addingTool, { required super.interactiveLayerBehaviour, }) { - _drawingPreview ??= interactiveLayerBehaviour - .getAddingDrawingPreview(addingTool.getInteractableDrawing()); + _drawingPreview ??= interactiveLayerBehaviour.getAddingDrawingPreview( + addingTool.getInteractableDrawing( + interactiveLayerBehaviour.interactiveLayer.drawingContext, + interactiveLayerBehaviour.getToolState, + ), + ); } /// The tool being added. From f856fe0b278f67c5cabe8b6dcfe0b119eb142141 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Wed, 11 Jun 2025 18:50:53 +0800 Subject: [PATCH 266/311] fix: hitTest for horizontal line not return true when touch position is on y-axis --- lib/src/deriv_chart/chart/y_axis/y_axis_config.dart | 3 +++ .../deriv_chart/interactive_layer/drawing_context.dart | 5 +---- .../horizontal_line_interactable_drawing.dart | 7 +++++++ .../deriv_chart/interactive_layer/interactive_layer.dart | 8 +++++++- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/chart/y_axis/y_axis_config.dart b/lib/src/deriv_chart/chart/y_axis/y_axis_config.dart index 1b2046d20..190920d79 100644 --- a/lib/src/deriv_chart/chart/y_axis/y_axis_config.dart +++ b/lib/src/deriv_chart/chart/y_axis/y_axis_config.dart @@ -1,5 +1,8 @@ import 'package:flutter/material.dart'; +// TODO(NA): Change to a non-singleton class in the future, since it can be an +// anti-pattern in some cases, and usually leads to tight coupling in the +// codebase. ///Singleton class to manage configuration and operations related to the Y-axis ///in custom painting class YAxisConfig { diff --git a/lib/src/deriv_chart/interactive_layer/drawing_context.dart b/lib/src/deriv_chart/interactive_layer/drawing_context.dart index eccb96e65..4329c2bb2 100644 --- a/lib/src/deriv_chart/interactive_layer/drawing_context.dart +++ b/lib/src/deriv_chart/interactive_layer/drawing_context.dart @@ -7,10 +7,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_ /// layer. class DrawingContext { /// Initializes the [DrawingContext]. - DrawingContext({ - required this.fullSize, - required this.contentSize, - }); + DrawingContext({required this.fullSize, required this.contentSize}); /// The full size of the chart layer that [InteractiveLayerBase] can show /// drawings on it. diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart index 0cfc2554b..8986bd876 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/horizontal_line/horizontal_line_interactable_drawing.dart @@ -79,6 +79,13 @@ class HorizontalLineInteractableDrawing return false; } + final isNotSelected = !state.contains(DrawingToolState.selected); + final isOutsideContent = offset.dx > drawingContext.contentSize.width; + + if (isNotSelected && isOutsideContent) { + return false; + } + // Convert start and end points from epoch/quote to screen coordinates final Offset startOffset = Offset( epochToX(startPoint!.epoch), diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 97adca53c..b22c2f860 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -5,6 +5,7 @@ import 'package:deriv_chart/src/add_ons/repository.dart'; import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart'; import 'package:deriv_chart/src/deriv_chart/chart/multiple_animated_builder.dart'; import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/y_axis/y_axis_config.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/drawing_context.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; @@ -369,9 +370,14 @@ class _InteractiveLayerGestureHandlerState Widget build(BuildContext context) { final XAxisModel xAxis = context.watch(); return LayoutBuilder(builder: (_, BoxConstraints constraints) { + final YAxisConfig yAxisConfig = YAxisConfig.instance; + _drawingContext = DrawingContext( fullSize: Size(constraints.maxWidth, constraints.maxHeight), - contentSize: Size(constraints.maxWidth, constraints.maxHeight), + contentSize: Size( + constraints.maxWidth - yAxisConfig.cachedLabelWidth!, + constraints.maxHeight, + ), ); return MouseRegion( From d746360a88e48c35646cc5d4de5f463c000bf4fe Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 12 Jun 2025 13:20:45 +0800 Subject: [PATCH 267/311] chore: remove debounce when saving drawing tools --- .../interactive_layer/interactive_layer.dart | 49 +++++-------------- 1 file changed, 13 insertions(+), 36 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index b22c2f860..2bff7a6ab 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -85,17 +85,6 @@ class _InteractiveLayerState extends State { final Map _interactableDrawings = {}; - /// Timers for debouncing repository updates - /// - /// We use a map to have one timer per each drawing tool config. This is - /// because the request to update the config of different tools can come at - /// the same time. If we use only one timer a new request from a different - /// tool will cancel the previous one. - final Map _debounceTimers = {}; - - /// Duration for debouncing repository updates (1-sec is a good balance) - static const Duration _debounceDuration = Duration(milliseconds: 300); - @override void initState() { super.initState(); @@ -149,30 +138,23 @@ class _InteractiveLayerState extends State { return; } - // Cancel any existing timer - _debounceTimers[configId]?.cancel(); - - // Create a new timer - _debounceTimers[configId] = Timer(_debounceDuration, () { - // Only proceed if the widget is still mounted - if (!mounted) { - return; - } + if (!mounted) { + return; + } - final Repository repo = - context.read>(); + final Repository repo = + context.read>(); - // Find the index of the config in the repository - final int index = repo.items - .indexWhere((config) => config.configId == drawing.configId); + // Find the index of the config in the repository + final int index = + repo.items.indexWhere((config) => config.configId == drawing.configId); - if (index == -1) { - return; // Config not found - } + if (index == -1) { + return; // Config not found + } - // Update the config in the repository - repo.updateAt(index, drawing); - }); + // Update the config in the repository + repo.updateAt(index, drawing); } DrawingToolConfig _addDrawingToRepo(DrawingToolConfig drawing) { @@ -187,11 +169,6 @@ class _InteractiveLayerState extends State { @override void dispose() { - // Cancel the debounce timers when the widget is disposed - for (final Timer timer in _debounceTimers.values) { - timer.cancel(); - } - _debounceTimers.clear(); widget.drawingToolsRepo.removeListener(syncDrawingsWithConfigs); super.dispose(); From be8f83674d068f3cca5540fea34c6aff6da3cd4a Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 12 Jun 2025 13:24:04 +0800 Subject: [PATCH 268/311] revert pubspec change --- pubspec.yaml | 3 --- 1 file changed, 3 deletions(-) diff --git a/pubspec.yaml b/pubspec.yaml index 0739eaafd..2e35ad16a 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -23,9 +23,6 @@ dependencies: shared_preferences: ^2.1.0 meta: ^1.15.0 -dependency_overrides: - dart_style: ^2.3.4 - dev_dependencies: flutter_test: sdk: flutter From 42cedc3df710212d219a6d2fd3629c16342a0413 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 12 Jun 2025 13:25:20 +0800 Subject: [PATCH 269/311] fix formatting --- lib/src/deriv_chart/interactive_layer/interactive_layer.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 2bff7a6ab..ab87c7483 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -169,7 +169,6 @@ class _InteractiveLayerState extends State { @override void dispose() { - widget.drawingToolsRepo.removeListener(syncDrawingsWithConfigs); super.dispose(); } From ed27cb49277ed7e60211b2291d8894e768529e43 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 12 Jun 2025 13:26:47 +0800 Subject: [PATCH 270/311] minor change in UI dimensions --- .../widgets/selected_drawing_floating_menu.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart index 70240865f..6eb3e5a9a 100644 --- a/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart +++ b/lib/src/deriv_chart/interactive_layer/widgets/selected_drawing_floating_menu.dart @@ -126,7 +126,7 @@ class _SelectedDrawingFloatingMenuState color: CoreDesignTokens.coreColorSolidSlate1100, borderRadius: BorderRadius.circular(8), ), - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), + padding: const EdgeInsets.only(right: 8, top: 4, bottom: 4), child: Row( children: [ _buildDragIcon(), From 1fc1048177eea88afd6c971ac4c5a76fbd3535e2 Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 12 Jun 2025 13:31:37 +0800 Subject: [PATCH 271/311] make the floating menu initial position customizable --- lib/src/deriv_chart/deriv_chart.dart | 6 ++---- .../interactive_layer_controller.dart | 12 +++++++++++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index 0da91ddf3..a4de1dd04 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -214,10 +214,8 @@ class _DerivChartState extends State { _interactiveLayerBehaviour = widget.interactiveLayerBehaviour ?? (kIsWeb - ? InteractiveLayerDesktopBehaviour( - controller: InteractiveLayerController()) - : InteractiveLayerMobileBehaviour( - controller: InteractiveLayerController())); + ? InteractiveLayerDesktopBehaviour() + : InteractiveLayerMobileBehaviour()); _initRepos(); } diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart index 11b1fa40f..531f50987 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer_controller.dart @@ -13,6 +13,16 @@ import 'interactive_layer_states/interactive_state.dart'; /// This controller acts as the bridge between outside of the chart component /// and interactive layer. class InteractiveLayerController extends ChangeNotifier { + /// Creates an instance of [InteractiveLayerController]. + /// + /// [floatingMenuInitialPosition] is the initial position of the floating + /// menu that appears when a drawing is selected. + /// Once it appears on this initial position, it can be moved by the user + /// and the internal [floatingMenuPosition] will be updated accordingly. + InteractiveLayerController({ + Offset floatingMenuInitialPosition = Offset.zero, + }) : floatingMenuPosition = floatingMenuInitialPosition; + /// The current state of the interactive layer. late InteractiveState _currentState; @@ -20,7 +30,7 @@ class InteractiveLayerController extends ChangeNotifier { InteractiveState get currentState => _currentState; /// The current position of the floating menu. - Offset floatingMenuPosition = Offset.zero; + Offset floatingMenuPosition; /// The current state of the interactive layer. set currentState(InteractiveState state) { From adecc7ea000433e312b8da1dfc95048fafb69c2e Mon Sep 17 00:00:00 2001 From: ramin-deriv Date: Thu, 12 Jun 2025 13:40:22 +0800 Subject: [PATCH 272/311] fix lint warnings --- lib/src/deriv_chart/deriv_chart.dart | 1 - .../trend_line/trend_line_adding_preview_desktop.dart | 1 - 2 files changed, 2 deletions(-) diff --git a/lib/src/deriv_chart/deriv_chart.dart b/lib/src/deriv_chart/deriv_chart.dart index a4de1dd04..01e999a8a 100644 --- a/lib/src/deriv_chart/deriv_chart.dart +++ b/lib/src/deriv_chart/deriv_chart.dart @@ -27,7 +27,6 @@ import 'package:shared_preferences/shared_preferences.dart'; import 'interactive_layer/interactive_layer_behaviours/interactive_layer_behaviour.dart'; import 'interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; -import 'interactive_layer/interactive_layer_controller.dart'; /// A wrapper around the [Chart] which handles adding indicators to the chart. class DerivChart extends StatefulWidget { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart index c7e991142..496ba034b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_adding_preview_desktop.dart @@ -5,7 +5,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/interactive_layer/helpers/paint_helpers.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; From 46eaf1c4f8de31425f3622a825dbe2d5c01b13d5 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 25 Jun 2025 11:38:17 +0800 Subject: [PATCH 273/311] feat: add fibonacci fan drawing tool to the interactive layer --- .../fibfan/fibfan_drawing_tool_config.dart | 52 +- .../fibfan/fibfan_drawing_tool_config.g.dart | 28 +- .../helpers/paint_helpers.dart | 75 ++- .../interactable_drawing_custom_painter.dart | 2 + .../fibfan/fibfan_adding_preview_desktop.dart | 171 +++++ .../fibfan/fibfan_adding_preview_mobile.dart | 223 +++++++ .../fibfan/fibfan_interactable_drawing.dart | 587 ++++++++++++++++++ .../interactable_drawings/fibfan/helpers.dart | 213 +++++++ 8 files changed, 1344 insertions(+), 7 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart index 4bf279bc9..0ecded4a3 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart @@ -4,6 +4,12 @@ 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/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; import 'package:json_annotation/json_annotation.dart'; @@ -13,14 +19,27 @@ part 'fibfan_drawing_tool_config.g.dart'; /// Fibfan drawing tool config @JsonSerializable() +@ColorConverter() class FibfanDrawingToolConfig extends DrawingToolConfig { /// Initializes const FibfanDrawingToolConfig({ String? configId, DrawingData? drawingData, List edgePoints = const [], - this.fillStyle = const LineStyle(thickness: 0.9, color: Colors.blue), - this.lineStyle = const LineStyle(thickness: 0.9, color: Colors.white), + this.fillStyle = const LineStyle(thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), + this.lineStyle = const LineStyle( + thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), + this.fibonacciLevelColors = const { + 'level0': Color(0xFF2196F3), // Blue for 0% + 'level38_2': Color(0xFF00BCD4), // Cyan for 38.2% + 'level50': Color(0xFFFFC107), // Amber for 50% + 'level61_8': Color(0xFFFF9800), // Orange for 61.8% + 'level100': Color(0xFF2196F3), // Blue for 100% + }, + this.labelStyle = const TextStyle( + color: CoreDesignTokens.coreColorSolidBlue700, + fontSize: 12, + ), super.number, }) : super( configId: configId, @@ -45,6 +64,13 @@ class FibfanDrawingToolConfig extends DrawingToolConfig { /// Drawing tool fill style final LineStyle fillStyle; + /// Colors for each Fibonacci level + final Map fibonacciLevelColors; + + /// The style of the label showing on y-axis. + @TextStyleJsonConverter() + final TextStyle labelStyle; + @override DrawingToolItem getItem( UpdateDrawingTool updateDrawingTool, @@ -62,17 +88,39 @@ class FibfanDrawingToolConfig extends DrawingToolConfig { DrawingData? drawingData, LineStyle? lineStyle, LineStyle? fillStyle, + TextStyle? labelStyle, DrawingPatterns? pattern, List? edgePoints, bool? enableLabel, int? number, + Map? 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, + ); + } } diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart index 8f746ff52..03039ae50 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart @@ -18,21 +18,43 @@ FibfanDrawingToolConfig _$FibfanDrawingToolConfigFromJson( .toList() ?? const [], fillStyle: json['fillStyle'] == null - ? const LineStyle(thickness: 0.9, color: Colors.blue) + ? const LineStyle( + thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700) : LineStyle.fromJson(json['fillStyle'] as Map), lineStyle: json['lineStyle'] == null - ? const LineStyle(thickness: 0.9, color: Colors.white) + ? const LineStyle( + thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700) : LineStyle.fromJson(json['lineStyle'] as Map), + fibonacciLevelColors: + (json['fibonacciLevelColors'] as Map?)?.map( + (k, e) => MapEntry( + k, const ColorConverter().fromJson((e as num).toInt())), + ) ?? + const { + 'level0': Color(0xFF2196F3), + 'level38_2': Color(0xFF00BCD4), + 'level50': Color(0xFFFFC107), + 'level61_8': Color(0xFFFF9800), + 'level100': Color(0xFF2196F3) + }, + labelStyle: json['labelStyle'] == null + ? const TextStyle( + color: CoreDesignTokens.coreColorSolidBlue700, fontSize: 12) + : const TextStyleJsonConverter() + .fromJson(json['labelStyle'] as Map), number: (json['number'] as num?)?.toInt() ?? 0, ); Map _$FibfanDrawingToolConfigToJson( FibfanDrawingToolConfig instance) => { + 'configId': instance.configId, 'number': instance.number, 'drawingData': instance.drawingData, 'edgePoints': instance.edgePoints, - 'configId': instance.configId, 'lineStyle': instance.lineStyle, 'fillStyle': instance.fillStyle, + 'fibonacciLevelColors': instance.fibonacciLevelColors + .map((k, e) => MapEntry(k, const ColorConverter().toJson(e))), + 'labelStyle': const TextStyleJsonConverter().toJson(instance.labelStyle), }; diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 9eb7a484b..9bb9b2f74 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -5,12 +5,14 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/edge_point.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; +import 'package:intl/intl.dart' as intl; /// Draws alignment guides (horizontal and vertical lines) for a single point -void drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset) { +void drawPointAlignmentGuides(Canvas canvas, Size size, Offset pointOffset, + {Color lineColor = const Color(0x80FFFFFF)}) { // Create a dashed paint style for the alignment guides final Paint guidesPaint = Paint() - ..color = const Color(0x80FFFFFF) // Semi-transparent white + ..color = lineColor ..strokeWidth = 1.0 ..style = PaintingStyle.stroke; @@ -244,6 +246,75 @@ void drawValueLabel({ ); } +/// Draws an epoch label rectangle on the x-axis with formatted time +/// +/// This draws a rounded rectangle with the formatted epoch time inside it. +/// The epoch is formatted as a readable time string. +void drawEpochLabel({ + required Canvas canvas, + required EpochToX epochToX, + required int epoch, + required Size size, + required TextStyle textStyle, + double animationProgress = 1, + Color color = Colors.white, + Color backgroundColor = Colors.transparent, +}) { + // Calculate X position based on the epoch + final double xPosition = epochToX(epoch); + + final DateTime dateTime = DateTime.fromMillisecondsSinceEpoch(epoch); + final intl.DateFormat formatter = intl.DateFormat('MM/dd/yy HH:mm:ss'); + final String formattedTime = formatter.format(dateTime); + + // Create text painter to measure text dimensions + final TextPainter textPainter = _getTextPainter( + formattedTime, + textStyle: textStyle.copyWith( + color: textStyle.color?.withOpacity(animationProgress), + ), + )..layout(); + + // Create rectangle with padding around the text + final double rectWidth = textPainter.width + 16; + const double rectHeight = 24; + final double rectBottom = size.height + rectHeight; + final double rectTop = rectBottom - rectHeight; + + final Rect rect = Rect.fromLTRB( + xPosition - rectWidth / 2, + rectTop, + xPosition + rectWidth / 2, + rectBottom, + ); + + // Draw rounded rectangle + final Paint rectPaint = Paint() + ..color = backgroundColor.withOpacity(animationProgress) + ..style = PaintingStyle.fill; + + final Paint borderPaint = Paint() + ..color = color.withOpacity(animationProgress) + ..style = PaintingStyle.stroke + ..strokeWidth = 1.0; + + // Draw the background and border + final RRect roundedRect = + RRect.fromRectAndRadius(rect, const Radius.circular(4)); + canvas + ..drawRRect(roundedRect, rectPaint) + ..drawRRect(roundedRect, borderPaint); + + // Draw the text centered in the rectangle + textPainter.paint( + canvas, + Offset( + rect.left + (rectWidth - textPainter.width) / 2, + rect.top + (rectHeight - textPainter.height) / 2, + ), + ); +} + /// Returns a [TextPainter] for the given formatted value and color. TextPainter _getTextPainter( String formattedValue, { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart index bfcf9c26b..f7cfd5664 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawing_custom_painter.dart @@ -121,6 +121,8 @@ class InteractableDrawingCustomPainter extends CustomPainter { oldDelegate.epochRange != epochRange || // Quote range is changed oldDelegate.quoteRange != quoteRange || + // Theme is changed + oldDelegate.theme != theme || // Drawing needs repaint drawing.shouldRepaint( currentDrawingState, oldDelegate.drawing))); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart new file mode 100644 index 000000000..303b31792 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -0,0 +1,171 @@ +import 'dart:ui'; + +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/interactive_layer/helpers/paint_helpers.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.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/gestures.dart'; + +import '../../helpers/types.dart'; +import '../drawing_adding_preview.dart'; +import 'fibfan_interactable_drawing.dart'; + +/// A class to show a preview and handle adding +/// [FibfanInteractableDrawing] to the chart. It's for when we're on +/// [InteractiveLayerDesktopBehaviour] +class FibfanAddingPreviewDesktop + extends DrawingAddingPreview { + /// Initializes [FibfanAddingPreviewDesktop]. + FibfanAddingPreviewDesktop({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }); + + Offset? _hoverPosition; + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) => false; + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + + @override + String get id => 'Fibfan-adding-preview-desktop'; + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState drawingState, + ) { + final LineStyle lineStyle = interactableDrawing.config.lineStyle; + final LineStyle fillStyle = interactableDrawing.config.fillStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + if (interactableDrawing.startPoint == null && _hoverPosition != null) { + final Offset pointOffset = Offset( + _hoverPosition!.dx, + _hoverPosition!.dy, + ); + drawPointAlignmentGuides(canvas, size, pointOffset, + lineColor: interactableDrawing.config.lineStyle.color); + } + if (interactableDrawing.startPoint != null && _hoverPosition != null) { + // Draw preview fan from start point to hover position + final Offset startOffset = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + + // Validate coordinates before proceeding + if (startOffset.dx.isNaN || + startOffset.dy.isNaN || + _hoverPosition!.dx.isNaN || + _hoverPosition!.dy.isNaN) { + return; + } + + final double deltaX = _hoverPosition!.dx - startOffset.dx; + final double deltaY = _hoverPosition!.dy - startOffset.dy; + + // Only draw if we have meaningful deltas + if (deltaX.abs() > 1 || deltaY.abs() > 1) { + // Draw filled areas between fan lines + FibonacciFanHelpers.drawFanFills( + canvas, startOffset, deltaX, deltaY, size, paintStyle, fillStyle); + // Draw fan lines + FibonacciFanHelpers.drawFanLines( + canvas, startOffset, deltaX, deltaY, size, paintStyle, lineStyle, + fibonacciLevelColors: + interactableDrawing.config.fibonacciLevelColors); + } + // Draw labels for the fan lines + FibonacciFanHelpers.drawFanLabels( + canvas, startOffset, deltaX, deltaY, size, lineStyle, + fibonacciLabels: FibonacciFanHelpers.fibonacciLabels, + fibonacciLevelColors: + interactableDrawing.config.fibonacciLevelColors); + final Offset pointOffset = Offset( + _hoverPosition!.dx, + _hoverPosition!.dy, + ); + drawPointAlignmentGuides(canvas, size, pointOffset, + lineColor: interactableDrawing.config.lineStyle.color); + } + } + + @override + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { + if (_hoverPosition != null) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: interactiveLayerBehaviour.interactiveLayer + .quoteFromY(_hoverPosition!.dy), + pipSize: chartConfig.pipSize, + size: size, + color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + textStyle: interactableDrawing.config.labelStyle, + ); + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: interactiveLayerBehaviour.interactiveLayer + .epochFromX(_hoverPosition!.dx), + size: size, + textStyle: interactableDrawing.config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + if (interactableDrawing.startPoint == null) { + // First tap - set start point + interactableDrawing.startPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + } else if (interactableDrawing.endPoint == null) { + // Second tap - set end point and complete the drawing + interactableDrawing.endPoint = EdgePoint( + epoch: epochFromX(details.localPosition.dx), + quote: quoteFromY(details.localPosition.dy), + ); + onDone(); + } + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart new file mode 100644 index 000000000..7d8407868 --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -0,0 +1,223 @@ +import 'dart:ui'; + +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/edge_point.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +import 'package:deriv_chart/src/models/chart_config.dart'; +import 'package:deriv_chart/src/theme/chart_theme.dart'; +import 'package:flutter/gestures.dart'; + +import '../../helpers/types.dart'; +import '../drawing_adding_preview.dart'; +import 'fibfan_interactable_drawing.dart'; + +/// A class to show a preview and handle adding a +/// [FibfanInteractableDrawing] to the chart. It's for when we're on +/// [InteractiveLayerMobileBehaviour]. +class FibfanAddingPreviewMobile + extends DrawingAddingPreview { + /// Initializes [FibfanAddingPreviewMobile]. + FibfanAddingPreviewMobile({ + required super.interactiveLayerBehaviour, + required super.interactableDrawing, + }) { + if (interactableDrawing.startPoint == null) { + final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; + final Size? layerSize = interactiveLayer.drawingContext.fullSize; + + final double centerX = layerSize != null ? layerSize.width / 2 : 0; + final double centerY = layerSize != null ? layerSize.height / 2 : 0; + + interactableDrawing.startPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(centerX), + quote: interactiveLayer.quoteFromY(centerY), + ); + } + + if (interactableDrawing.endPoint == null) { + final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; + final Size? layerSize = interactiveLayer.drawingContext.fullSize; + + final double centerX = layerSize != null ? layerSize.width / 2 : 0; + final double centerY = layerSize != null ? layerSize.height / 2 : 0; + + // Set end point slightly offset from start point to show initial fan + interactableDrawing.endPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(centerX + 100), + quote: interactiveLayer.quoteFromY(centerY + 50), + ); + } + } + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + return interactableDrawing.hitTest(offset, epochToX, quoteToY); + } + + @override + String get id => 'Fibfan-adding-preview-mobile'; + + @override + void onDragStart(DragStartDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + interactableDrawing.onDragStart( + details, epochFromX, quoteFromY, epochToX, quoteToY); + } + + @override + void onDragUpdate(DragUpdateDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + interactableDrawing.onDragUpdate( + details, + epochFromX, + quoteFromY, + epochToX, + quoteToY, + ); + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState drawingState, + ) { + if (interactableDrawing.startPoint != null && + interactableDrawing.endPoint != null) { + final Offset startOffset = Offset( + epochToX(interactableDrawing.startPoint!.epoch), + quoteToY(interactableDrawing.startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(interactableDrawing.endPoint!.epoch), + quoteToY(interactableDrawing.endPoint!.quote), + ); + + // Validate coordinates before proceeding + if (startOffset.dx.isNaN || + startOffset.dy.isNaN || + endOffset.dx.isNaN || + endOffset.dy.isNaN) { + return; + } + + // Calculate the base vector + final double deltaX = endOffset.dx - startOffset.dx; + final double deltaY = endOffset.dy - startOffset.dy; + + // Only draw if we have meaningful deltas + if (deltaX.abs() > 1 || deltaY.abs() > 1) { + // Draw preview fan lines with dashed style + _drawPreviewFanLines(canvas, startOffset, deltaX, deltaY, size); + } + } + } + + /// Draws preview fan lines with dashed style + void _drawPreviewFanLines( + Canvas canvas, + Offset startOffset, + double deltaX, + double deltaY, + Size size, + ) { + final Paint dashPaint = Paint() + ..color = interactableDrawing.config.lineStyle.color.withOpacity(0.7) + ..style = PaintingStyle.stroke + ..strokeWidth = interactableDrawing.config.lineStyle.thickness; + + // Fibonacci ratios for the fan lines + const List fibRatios = [0.0, 0.382, 0.5, 0.618, 1.0]; + + for (final double ratio in fibRatios) { + final Offset fanPoint = Offset( + startOffset.dx + deltaX, + startOffset.dy + deltaY * ratio, + ); + + // Extend line to the edge of the screen + final double screenWidth = size.width; + final double deltaXFan = fanPoint.dx - startOffset.dx; + + // Handle vertical lines and avoid division by zero + Offset extendedPoint; + if (deltaXFan.abs() < 0.001) { + // Vertical line + extendedPoint = Offset(fanPoint.dx, size.height); + } else { + final double slope = (fanPoint.dy - startOffset.dy) / deltaXFan; + extendedPoint = Offset( + screenWidth, + startOffset.dy + slope * (screenWidth - startOffset.dx), + ); + } + + // Draw dashed line + _drawDashedLine(canvas, startOffset, extendedPoint, dashPaint); + } + } + + /// Draws a dashed line between two points + void _drawDashedLine(Canvas canvas, Offset start, Offset end, Paint paint) { + const double dashWidth = 5; + const double dashSpace = 3; + final double distance = (end - start).distance; + + // Handle edge cases + if (distance <= 0 || + start.dx.isNaN || + start.dy.isNaN || + end.dx.isNaN || + end.dy.isNaN) { + return; + } + + final Offset direction = (end - start) / distance; + + double currentDistance = 0; + bool isDash = true; + + while (currentDistance < distance) { + final double segmentLength = isDash ? dashWidth : dashSpace; + final double remainingDistance = distance - currentDistance; + final double actualSegmentLength = + segmentLength > remainingDistance ? remainingDistance : segmentLength; + + if (isDash && actualSegmentLength > 0) { + final Offset segmentStart = start + direction * currentDistance; + final Offset segmentEnd = + start + direction * (currentDistance + actualSegmentLength); + + // Validate segment points before drawing + if (!segmentStart.dx.isNaN && + !segmentStart.dy.isNaN && + !segmentEnd.dx.isNaN && + !segmentEnd.dy.isNaN) { + canvas.drawLine(segmentStart, segmentEnd, paint); + } + } + + currentDistance += actualSegmentLength.toDouble(); + isDash = !isDash; + } + } + + @override + void onCreateTap( + TapUpDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + VoidCallback onDone, + ) { + // For mobile, we complete the drawing on first tap since we already have both points + onDone(); + } +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart new file mode 100644 index 000000000..b30fa2b9a --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -0,0 +1,587 @@ +import 'dart:ui' as ui; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; +import 'package:deriv_chart/src/add_ons/drawing_tools_ui/fibfan/fibfan_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/extensions/extensions.dart'; +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/widgets/color_picker.dart'; +import 'package:deriv_chart/src/models/axis_range.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/design_tokens/core_design_tokens.dart'; +import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/gestures.dart'; +import 'package:flutter/material.dart'; + +import '../../enums/drawing_tool_state.dart'; +import '../../helpers/paint_helpers.dart'; +import '../../helpers/types.dart'; +import '../../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; +import '../../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +import '../drawing_v2.dart'; +import '../interactable_drawing.dart'; +import 'fibfan_adding_preview_desktop.dart'; +import 'fibfan_adding_preview_mobile.dart'; + +/// Interactable drawing for Fibonacci Fan drawing tool. +class FibfanInteractableDrawing + extends InteractableDrawing { + /// Initializes [FibfanInteractableDrawing]. + FibfanInteractableDrawing({ + required FibfanDrawingToolConfig config, + required this.startPoint, + required this.endPoint, + required super.drawingContext, + required super.getDrawingState, + }) : super(drawingConfig: config); + + /// Start point of the fan. + EdgePoint? startPoint; + + /// End point of the fan. + EdgePoint? endPoint; + + /// Tracks which point is being dragged, if any + /// + /// [null]: dragging the whole fan. + /// [true]: dragging the start point. + /// [false]: dragging the end point. + bool? isDraggingStartPoint; + + Offset? _hoverPosition; + + @override + void onHover(PointerHoverEvent event, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _hoverPosition = event.localPosition; + } + + @override + void onDragStart( + DragStartDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (startPoint == null || endPoint == null) { + return; + } + + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Check if the drag is starting on one of the endpoints + final double startDistance = (details.localPosition - startOffset).distance; + final double endDistance = (details.localPosition - endOffset).distance; + + // If the drag is starting on the start point + if (startDistance <= hitTestMargin) { + isDraggingStartPoint = true; + return; + } + + // If the drag is starting on the end point + if (endDistance <= hitTestMargin) { + isDraggingStartPoint = false; + return; + } + + // Check if the drag is on any of the fan lines + if (_hitTestFanLines(details.localPosition, epochToX, quoteToY)) { + isDraggingStartPoint = null; // Dragging the whole fan + return; + } + } + + @override + bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (startPoint == null || endPoint == null) { + return false; + } + + final isNotSelected = !state.contains(DrawingToolState.selected); + final isOutsideContent = offset.dx > drawingContext.contentSize.width; + + if (isNotSelected && isOutsideContent) { + return false; + } + + // Convert start and end points from epoch/quote to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Check if the pointer is near either endpoint + final double startDistance = (offset - startOffset).distance; + final double endDistance = (offset - endOffset).distance; + + if (startDistance <= hitTestMargin || endDistance <= hitTestMargin) { + return true; + } + + // Check if the pointer is near any of the fan lines + return _hitTestFanLines(offset, epochToX, quoteToY); + } + + /// Helper method to test if a point hits any of the fan lines + bool _hitTestFanLines(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (startPoint == null || endPoint == null) { + return false; + } + + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Calculate the base vector + final double deltaX = endOffset.dx - startOffset.dx; + final double deltaY = endOffset.dy - startOffset.dy; + + // Check each fan line + for (final double ratio in FibonacciFanHelpers.fibRatios) { + final Offset fanEndPoint = Offset( + startOffset.dx + deltaX, + startOffset.dy + deltaY * ratio, + ); + + // Extend the line to the edge of the screen + final double screenWidth = drawingContext.contentSize.width; + final double lineSlope = + (fanEndPoint.dy - startOffset.dy) / (fanEndPoint.dx - startOffset.dx); + final Offset extendedEndPoint = Offset( + screenWidth, + startOffset.dy + lineSlope * (screenWidth - startOffset.dx), + ); + + // Calculate perpendicular distance from point to line + final double lineLength = (extendedEndPoint - startOffset).distance; + if (lineLength < 1) { + continue; + } + + final double distance = + ((extendedEndPoint.dy - startOffset.dy) * offset.dx - + (extendedEndPoint.dx - startOffset.dx) * offset.dy + + extendedEndPoint.dx * startOffset.dy - + extendedEndPoint.dy * startOffset.dx) + .abs() / + lineLength; + + // Check if point is within the line segment + final double dotProduct = (offset.dx - startOffset.dx) * + (extendedEndPoint.dx - startOffset.dx) + + (offset.dy - startOffset.dy) * (extendedEndPoint.dy - startOffset.dy); + + final bool isWithinRange = + dotProduct >= 0 && dotProduct <= lineLength * lineLength; + + if (isWithinRange && distance <= hitTestMargin) { + return true; + } + } + + return false; + } + + @override + void paint( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { + final LineStyle lineStyle = config.lineStyle; + final LineStyle fillStyle = config.fillStyle; + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + final drawingState = getDrawingState(this); + + if (startPoint != null && endPoint != null) { + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Calculate the base vector + final double deltaX = endOffset.dx - startOffset.dx; + final double deltaY = endOffset.dy - startOffset.dy; + + // Draw fan lines + FibonacciFanHelpers.drawFanLines( + canvas, startOffset, deltaX, deltaY, size, paintStyle, lineStyle, + fibonacciLevelColors: config.fibonacciLevelColors); + + // Draw labels + if (drawingState.contains(DrawingToolState.selected)) { + // Draw filled areas between fan lines + FibonacciFanHelpers.drawFanFills( + canvas, startOffset, deltaX, deltaY, size, paintStyle, fillStyle); + FibonacciFanHelpers.drawFanLabels( + canvas, startOffset, deltaX, deltaY, size, lineStyle, + fibonacciLabels: FibonacciFanHelpers.fibonacciLabels, + fibonacciLevelColors: config.fibonacciLevelColors); + } + + // Draw endpoints with glowy effect if selected + if (drawingState.contains(DrawingToolState.selected) || + drawingState.contains(DrawingToolState.dragging)) { + drawPointsFocusedCircle( + paintStyle, + lineStyle, + canvas, + startOffset, + 10 * animationInfo.stateChangePercent, + 3 * animationInfo.stateChangePercent, + endOffset, + ); + } else if (drawingState.contains(DrawingToolState.hovered)) { + drawPointsFocusedCircle( + paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); + } + + // Draw alignment guides when dragging + if (drawingState.contains(DrawingToolState.dragging) && + isDraggingStartPoint != null) { + if (isDraggingStartPoint!) { + drawPointAlignmentGuides(canvas, size, startOffset, + lineColor: config.lineStyle.color); + } else { + drawPointAlignmentGuides(canvas, size, endOffset, + lineColor: config.lineStyle.color); + } + } else if (drawingState.contains(DrawingToolState.dragging) && + isDraggingStartPoint == null) { + drawPointAlignmentGuides(canvas, size, startOffset, + lineColor: config.lineStyle.color); + drawPointAlignmentGuides(canvas, size, endOffset, + lineColor: config.lineStyle.color); + } + } else if (startPoint != null && _hoverPosition != null) { + // Preview mode - draw fan from start point to hover position + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + + final double deltaX = _hoverPosition!.dx - startOffset.dx; + final double deltaY = _hoverPosition!.dy - startOffset.dy; + + FibonacciFanHelpers.drawFanLines( + canvas, startOffset, deltaX, deltaY, size, paintStyle, lineStyle); + drawPointAlignmentGuides(canvas, size, startOffset, + lineColor: config.lineStyle.color); + } + } + + @override + void paintOverYAxis( + ui.Canvas canvas, + ui.Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { + if (getDrawingState(this).contains(DrawingToolState.selected)) { + // Draw value label for start point + if (startPoint != null) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: startPoint!.quote, + pipSize: chartConfig.pipSize, + animationProgress: animationInfo.stateChangePercent, + size: size, + textStyle: config.labelStyle, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + + // Draw value label for end point (offset slightly to avoid overlap) + if (endPoint != null && + startPoint != null && + endPoint!.quote != startPoint!.quote) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: endPoint!.quote, + pipSize: chartConfig.pipSize, + animationProgress: animationInfo.stateChangePercent, + size: size, + textStyle: config.labelStyle, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + } + + paintXAxisLabels( + canvas, + size, + epochToX, + quoteToY, + animationInfo, + chartConfig, + chartTheme, + getDrawingState, + ); + } + + /// Paints epoch labels on the X-axis. + void paintXAxisLabels( + ui.Canvas canvas, + ui.Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { + if (getDrawingState(this).contains(DrawingToolState.selected)) { + // Draw epoch label for start point + if (startPoint != null) { + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: startPoint!.epoch, + size: size, + textStyle: config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + + // Draw epoch label for end point (only if different from start point to avoid overlap) + if (endPoint != null && + startPoint != null && + endPoint!.epoch != startPoint!.epoch) { + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: endPoint!.epoch, + size: size, + textStyle: config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + } + } + + @override + void onDragUpdate( + DragUpdateDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + if (startPoint == null || endPoint == null) { + return; + } + + // Get the drag delta in screen coordinates + final Offset delta = details.delta; + + // If we're dragging a specific point (start or end point) + if (isDraggingStartPoint != null) { + // Get the current point being dragged + final EdgePoint pointBeingDragged = + isDraggingStartPoint! ? startPoint! : endPoint!; + + // Get the current screen position of the point + final Offset currentOffset = Offset( + epochToX(pointBeingDragged.epoch), + quoteToY(pointBeingDragged.quote), + ); + + // Apply the delta to get the new screen position + final Offset newOffset = currentOffset + delta; + + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Create updated point + final EdgePoint updatedPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + + // Update the appropriate point + if (isDraggingStartPoint!) { + startPoint = updatedPoint; + } else { + endPoint = updatedPoint; + } + } else { + // We're dragging the whole fan + // Convert start and end points to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Apply the delta to get new screen coordinates + final Offset newStartOffset = startOffset + delta; + final Offset newEndOffset = endOffset + delta; + + // Convert back to epoch and quote coordinates + final int newStartEpoch = epochFromX(newStartOffset.dx); + final double newStartQuote = quoteFromY(newStartOffset.dy); + final int newEndEpoch = epochFromX(newEndOffset.dx); + final double newEndQuote = quoteFromY(newEndOffset.dy); + + // Update the start and end points + startPoint = EdgePoint( + epoch: newStartEpoch, + quote: newStartQuote, + ); + endPoint = EdgePoint( + epoch: newEndEpoch, + quote: newEndQuote, + ); + } + } + + @override + void onDragEnd( + DragEndDetails details, + EpochFromX epochFromX, + QuoteFromY quoteFromY, + EpochToX epochToX, + QuoteToY quoteToY, + ) { + // Reset the dragging flag when drag is complete + isDraggingStartPoint = null; + } + + @override + FibfanDrawingToolConfig getUpdatedConfig() => + config.copyWith(edgePoints: [ + if (startPoint != null) startPoint!, + if (endPoint != null) endPoint! + ]); + + @override + bool isInViewPort(EpochRange epochRange, QuoteRange quoteRange) => + (startPoint?.isInEpochRange( + epochRange.leftEpoch, + epochRange.rightEpoch, + ) ?? + true) || + (endPoint?.isInEpochRange( + epochRange.leftEpoch, + epochRange.rightEpoch, + ) ?? + true); + + @override + DrawingAddingPreview> + getAddingPreviewForDesktopBehaviour( + InteractiveLayerDesktopBehaviour layerBehaviour, + ) => + FibfanAddingPreviewDesktop( + interactiveLayerBehaviour: layerBehaviour, + interactableDrawing: this, + ); + + @override + DrawingAddingPreview> + getAddingPreviewForMobileBehaviour( + InteractiveLayerMobileBehaviour layerBehaviour, + ) => + FibfanAddingPreviewMobile( + interactiveLayerBehaviour: layerBehaviour, + interactableDrawing: this, + ); + + @override + Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => Row( + children: [ + _buildLineThicknessIcon(), + const SizedBox(width: 4), + _buildColorPickerIcon(onUpdate) + ], + ); + + Widget _buildColorPickerIcon(UpdateDrawingTool onUpdate) => SizedBox( + width: 32, + height: 32, + child: ColorPicker( + currentColor: config.lineStyle.color, + onColorChanged: (newColor) => onUpdate(config.copyWith( + lineStyle: config.lineStyle.copyWith(color: newColor), + fillStyle: config.fillStyle.copyWith(color: newColor), + )), + ), + ); + + Widget _buildLineThicknessIcon() => SizedBox( + width: 32, + height: 32, + child: TextButton( + style: TextButton.styleFrom( + foregroundColor: Colors.white38, + alignment: Alignment.center, + padding: const EdgeInsets.symmetric(), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(4), + ), + ), + onPressed: () { + // update line thickness + }, + child: Text( + '${config.lineStyle.thickness.toInt()}px', + style: const TextStyle( + fontSize: 14, + color: CoreDesignTokens.coreColorSolidSlate50, + fontWeight: FontWeight.normal, + height: 2, + ), + textAlign: TextAlign.center, + ), + ), + ); +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart new file mode 100644 index 000000000..de32bcc4e --- /dev/null +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -0,0 +1,213 @@ +import 'dart:math' as math; + +import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; +import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:flutter/material.dart'; + +/// Helper class for Fibonacci Fan drawing operations +class FibonacciFanHelpers { + /// Fibonacci ratios for the fan lines + static const List fibRatios = [0.0, 0.382, 0.5, 0.618, 1.0]; + + /// Labels for each Fibonacci level + static const List fibonacciLabels = [ + '100%', + '61.8%', + '50%', + '38.2%', + '0%', + ]; + + /// Draws the filled areas between fan lines + static void drawFanFills( + Canvas canvas, + Offset startOffset, + double deltaX, + double deltaY, + Size size, + DrawingPaintStyle paintStyle, + LineStyle fillStyle, + ) { + for (int i = 0; i < fibRatios.length - 1; i++) { + final double ratio1 = fibRatios[i]; + final double ratio2 = fibRatios[i + 1]; + + final Offset fanPoint1 = Offset( + startOffset.dx + deltaX, + startOffset.dy + deltaY * ratio1, + ); + final Offset fanPoint2 = Offset( + startOffset.dx + deltaX, + startOffset.dy + deltaY * ratio2, + ); + + // Extend lines to the edge of the screen + final double screenWidth = size.width; + final double slope1 = + (fanPoint1.dy - startOffset.dy) / (fanPoint1.dx - startOffset.dx); + final double slope2 = + (fanPoint2.dy - startOffset.dy) / (fanPoint2.dx - startOffset.dx); + + final Offset extendedPoint1 = Offset( + screenWidth, + startOffset.dy + slope1 * (screenWidth - startOffset.dx), + ); + final Offset extendedPoint2 = Offset( + screenWidth, + startOffset.dy + slope2 * (screenWidth - startOffset.dx), + ); + + // Create path for the filled area + final Path fillPath = Path() + ..moveTo(startOffset.dx, startOffset.dy) + ..lineTo(extendedPoint1.dx, extendedPoint1.dy) + ..lineTo(extendedPoint2.dx, extendedPoint2.dy) + ..close(); + + // Draw filled area with alternating opacity + final double opacity = (i % 2 == 0) ? 0.1 : 0.05; + canvas.drawPath( + fillPath, + paintStyle.fillPaintStyle( + fillStyle.color.withOpacity(opacity), + fillStyle.thickness, + ), + ); + } + } + + /// Draws the fan lines + static void drawFanLines( + Canvas canvas, + Offset startOffset, + double deltaX, + double deltaY, + Size size, + DrawingPaintStyle paintStyle, + LineStyle lineStyle, { + Map? fibonacciLevelColors, + }) { + for (int i = 0; i < FibonacciFanHelpers.fibRatios.length; i++) { + final double ratio = FibonacciFanHelpers.fibRatios[i]; + + // Use custom color if provided, otherwise use default line style color + final List colorKeys = [ + 'level0', + 'level38_2', + 'level50', + 'level61_8', + 'level100' + ]; + final Color lineColor = (fibonacciLevelColors != null && + i < colorKeys.length && + fibonacciLevelColors.containsKey(colorKeys[i])) + ? fibonacciLevelColors[colorKeys[i]]! + : lineStyle.color; + + final Paint linePaint = paintStyle.linePaintStyle( + lineColor, + lineStyle.thickness, + ); + + final Offset fanPoint = Offset( + startOffset.dx + deltaX, + startOffset.dy + deltaY * ratio, + ); + + // Extend line to the edge of the screen + final double screenWidth = size.width; + final double slope = + (fanPoint.dy - startOffset.dy) / (fanPoint.dx - startOffset.dx); + final Offset extendedPoint = Offset( + screenWidth, + startOffset.dy + slope * (screenWidth - startOffset.dx), + ); + + canvas.drawLine(startOffset, extendedPoint, linePaint); + } + } + + /// Draws labels for the fan lines + static void drawFanLabels( + Canvas canvas, + Offset startOffset, + double deltaX, + double deltaY, + Size size, + LineStyle lineStyle, { + required List fibonacciLabels, + Map? fibonacciLevelColors, + }) { + final List labelsToUse = fibonacciLabels; + + for (int i = 0; i < FibonacciFanHelpers.fibRatios.length; i++) { + final double ratio = FibonacciFanHelpers.fibRatios[i]; + final String label = i < labelsToUse.length ? labelsToUse[i] : ''; + + final Offset fanPoint = Offset( + startOffset.dx + deltaX, + startOffset.dy + deltaY * ratio, + ); + + // Calculate the angle of the fan line + final double lineAngle = math.atan2( + fanPoint.dy - startOffset.dy, + fanPoint.dx - startOffset.dx, + ); + + // Calculate label position along the line + final Offset labelPosition = Offset( + startOffset.dx + (fanPoint.dx - startOffset.dx) * 1.02, + startOffset.dy + (fanPoint.dy - startOffset.dy) * 1.02, + ); + + // Use custom color if provided, otherwise use default line style color + final List colorKeys = [ + 'level0', + 'level38_2', + 'level50', + 'level61_8', + 'level100' + ]; + final Color labelColor = (fibonacciLevelColors != null && + i < colorKeys.length && + fibonacciLevelColors.containsKey(colorKeys[i])) + ? fibonacciLevelColors[colorKeys[i]]! + : lineStyle.color; + + final TextPainter textPainter = TextPainter( + text: TextSpan( + text: label, + style: TextStyle( + color: labelColor, + fontSize: 12, + fontWeight: FontWeight.w500, + ), + ), + textDirection: TextDirection.ltr, + )..layout(); + + // Save the current canvas state + canvas + ..save() + + // Translate to the label position + ..translate(labelPosition.dx, labelPosition.dy) + + // Rotate the canvas by the line angle + ..rotate(lineAngle); + + // Adjust text position to left-align it when rotated + final Offset textOffset = Offset( + 5, // Small offset from the line + -textPainter.height, + ); + + // Draw the rotated text + textPainter.paint(canvas, textOffset); + + // Restore the canvas state + canvas.restore(); + } + } +} From ec66e2c69b7c2b217b18ca9890922ace294803d7 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 25 Jun 2025 13:33:30 +0800 Subject: [PATCH 274/311] refactor: use ratios from the FibonacciFanHelpers class --- .../fibfan/fibfan_adding_preview_mobile.dart | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 7d8407868..6366a6035 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -9,6 +9,7 @@ import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; import '../../helpers/types.dart'; +import '../fibfan/helpers.dart'; import '../drawing_adding_preview.dart'; import 'fibfan_interactable_drawing.dart'; @@ -132,10 +133,7 @@ class FibfanAddingPreviewMobile ..style = PaintingStyle.stroke ..strokeWidth = interactableDrawing.config.lineStyle.thickness; - // Fibonacci ratios for the fan lines - const List fibRatios = [0.0, 0.382, 0.5, 0.618, 1.0]; - - for (final double ratio in fibRatios) { + for (final double ratio in FibonacciFanHelpers.fibRatios) { final Offset fanPoint = Offset( startOffset.dx + deltaX, startOffset.dy + deltaY * ratio, From b55f42e4ceb711bfbeb9653052f8739accc8b96e Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 25 Jun 2025 13:49:09 +0800 Subject: [PATCH 275/311] style: resolve code formatting issue --- .../fibfan/fibfan_drawing_tool_config.dart | 3 +- .../fibfan/fibfan_adding_preview_mobile.dart | 49 +++++++++++++------ 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart index 0ecded4a3..b7e0095ec 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart @@ -26,7 +26,8 @@ class FibfanDrawingToolConfig extends DrawingToolConfig { String? configId, DrawingData? drawingData, List edgePoints = const [], - this.fillStyle = const LineStyle(thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), + this.fillStyle = const LineStyle( + thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), this.lineStyle = const LineStyle( thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), this.fibonacciLevelColors = const { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 6366a6035..501b5ddc9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -27,27 +27,48 @@ class FibfanAddingPreviewMobile final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; final Size? layerSize = interactiveLayer.drawingContext.fullSize; - final double centerX = layerSize != null ? layerSize.width / 2 : 0; - final double centerY = layerSize != null ? layerSize.height / 2 : 0; - - interactableDrawing.startPoint = EdgePoint( - epoch: interactiveLayer.epochFromX(centerX), - quote: interactiveLayer.quoteFromY(centerY), - ); + if (layerSize != null) { + // Position start point around the chart data area (middle-right region) + final double startX = layerSize.width * 0.06; + final double startY = layerSize.height * 0.5; + + interactableDrawing.startPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(startX), + quote: interactiveLayer.quoteFromY(startY), + ); + } else { + // Fallback to center if size is not available + interactableDrawing.startPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(0), + quote: interactiveLayer.quoteFromY(0), + ); + } } if (interactableDrawing.endPoint == null) { final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; final Size? layerSize = interactiveLayer.drawingContext.fullSize; - final double centerX = layerSize != null ? layerSize.width / 2 : 0; - final double centerY = layerSize != null ? layerSize.height / 2 : 0; + if (layerSize != null) { + // Position end point slightly offset from start to create a compact fan + // This keeps the fan within the chart data area + final double endX = layerSize.width * 0.65; + final double endY = layerSize.height * 0.4; - // Set end point slightly offset from start point to show initial fan - interactableDrawing.endPoint = EdgePoint( - epoch: interactiveLayer.epochFromX(centerX + 100), - quote: interactiveLayer.quoteFromY(centerY + 50), - ); + interactableDrawing.endPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(endX), + quote: interactiveLayer.quoteFromY(endY), + ); + } else { + // Fallback with minimal offset if size is not available + final double fallbackX = 50; + final double fallbackY = 25; + + interactableDrawing.endPoint = EdgePoint( + epoch: interactiveLayer.epochFromX(fallbackX), + quote: interactiveLayer.quoteFromY(fallbackY), + ); + } } } From 43aad46974804463f84afa00c098a2092b1c504d Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 25 Jun 2025 13:52:14 +0800 Subject: [PATCH 276/311] feat: add edge points for preview drawing on mobile --- .../fibfan/fibfan_adding_preview_mobile.dart | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 501b5ddc9..fded86963 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -1,8 +1,10 @@ import 'dart:ui'; 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/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; @@ -61,8 +63,8 @@ class FibfanAddingPreviewMobile ); } else { // Fallback with minimal offset if size is not available - final double fallbackX = 50; - final double fallbackY = 25; + const double fallbackX = 50; + const double fallbackY = 25; interactableDrawing.endPoint = EdgePoint( epoch: interactiveLayer.epochFromX(fallbackX), @@ -138,6 +140,27 @@ class FibfanAddingPreviewMobile // Draw preview fan lines with dashed style _drawPreviewFanLines(canvas, startOffset, deltaX, deltaY, size); } + + // Draw edge points for the preview + final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + drawPointOffset( + startOffset, + epochToX, + quoteToY, + canvas, + paintStyle, + interactableDrawing.config.lineStyle, + radius: 4, + ); + drawPointOffset( + endOffset, + epochToX, + quoteToY, + canvas, + paintStyle, + interactableDrawing.config.lineStyle, + radius: 4, + ); } } From b91f50b12c258a78a0660f5a7f8679ad8bcef364 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 25 Jun 2025 13:56:06 +0800 Subject: [PATCH 277/311] chore: adjust the y-position of the fibonacci fan drawing tool on mobile --- .../fibfan/fibfan_adding_preview_mobile.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index fded86963..9cfba0176 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -55,7 +55,7 @@ class FibfanAddingPreviewMobile // Position end point slightly offset from start to create a compact fan // This keeps the fan within the chart data area final double endX = layerSize.width * 0.65; - final double endY = layerSize.height * 0.4; + final double endY = layerSize.height * 0.3; interactableDrawing.endPoint = EdgePoint( epoch: interactiveLayer.epochFromX(endX), From 654b9ff964468afec5baa7b90a777cd1e96026a9 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 11:00:46 +0800 Subject: [PATCH 278/311] fix(fibfan): correct upside-down preview orientation on mobile - Position end point above start point (30% vs 50% height) instead of below (70%) - Creates negative deltaY for proper upward fan spread - Update fallback positioning to maintain upward orientation - Ensures consistent visual behavior between mobile and desktop platforms Fixes issue where Fibonacci fan preview appeared inverted when first added on mobile devices. --- .../fibfan/fibfan_drawing_tool_config.dart | 14 +- .../fibfan/fibfan_drawing_tool_config.g.dart | 13 +- .../fibfan/fibfan_adding_preview_mobile.dart | 100 ++++++++- .../interactable_drawings/fibfan/helpers.dart | 192 +++++++++++------- 4 files changed, 229 insertions(+), 90 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart index b7e0095ec..f0cfcaa89 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart @@ -10,6 +10,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/drawing_context.da 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'; @@ -31,11 +32,14 @@ class FibfanDrawingToolConfig extends DrawingToolConfig { this.lineStyle = const LineStyle( thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), this.fibonacciLevelColors = const { - 'level0': Color(0xFF2196F3), // Blue for 0% - 'level38_2': Color(0xFF00BCD4), // Cyan for 38.2% - 'level50': Color(0xFFFFC107), // Amber for 50% - 'level61_8': Color(0xFFFF9800), // Orange for 61.8% - 'level100': Color(0xFF2196F3), // Blue for 100% + '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% }, this.labelStyle = const TextStyle( color: CoreDesignTokens.coreColorSolidBlue700, diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart index 03039ae50..217697551 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart @@ -31,11 +31,14 @@ FibfanDrawingToolConfig _$FibfanDrawingToolConfigFromJson( k, const ColorConverter().fromJson((e as num).toInt())), ) ?? const { - 'level0': Color(0xFF2196F3), - 'level38_2': Color(0xFF00BCD4), - 'level50': Color(0xFFFFC107), - 'level61_8': Color(0xFFFF9800), - 'level100': Color(0xFF2196F3) + 'level0': CoreDesignTokens.coreColorSolidBlue700, + 'level38_2': LightThemeDesignTokens + .semanticColorSeawaterSolidBorderStaticMid, + 'level50': LightThemeDesignTokens + .semanticColorMustardSolidBorderStaticHigh, + 'level61_8': LightThemeDesignTokens + .semanticColorYellowSolidBorderStaticMid, + 'level100': CoreDesignTokens.coreColorSolidBlue700 }, labelStyle: json['labelStyle'] == null ? const TextStyle( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 9cfba0176..c52179528 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -52,19 +52,19 @@ class FibfanAddingPreviewMobile final Size? layerSize = interactiveLayer.drawingContext.fullSize; if (layerSize != null) { - // Position end point slightly offset from start to create a compact fan - // This keeps the fan within the chart data area + // Position end point to the right and above start point + // This creates a proper upward-oriented Fibonacci fan final double endX = layerSize.width * 0.65; - final double endY = layerSize.height * 0.3; + final double endY = layerSize.height * 0.3; // Above start point (0.5) interactableDrawing.endPoint = EdgePoint( epoch: interactiveLayer.epochFromX(endX), quote: interactiveLayer.quoteFromY(endY), ); } else { - // Fallback with minimal offset if size is not available + // Fallback with proper orientation if size is not available const double fallbackX = 50; - const double fallbackY = 25; + const double fallbackY = -50; // Above start point interactableDrawing.endPoint = EdgePoint( epoch: interactiveLayer.epochFromX(fallbackX), @@ -74,6 +74,9 @@ class FibfanAddingPreviewMobile } } + /// Track if the drawing is currently being dragged + bool _isDragging = false; + @override bool hitTest(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { return interactableDrawing.hitTest(offset, epochToX, quoteToY); @@ -85,6 +88,7 @@ class FibfanAddingPreviewMobile @override void onDragStart(DragStartDetails details, EpochFromX epochFromX, QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _isDragging = true; interactableDrawing.onDragStart( details, epochFromX, quoteFromY, epochToX, quoteToY); } @@ -101,6 +105,15 @@ class FibfanAddingPreviewMobile ); } + /// Handle drag end to reset drag state + @override + void onDragEnd(DragEndDetails details, EpochFromX epochFromX, + QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY) { + _isDragging = false; + // Call parent implementation if it exists + super.onDragEnd(details, epochFromX, quoteFromY, epochToX, quoteToY); + } + @override void paint( Canvas canvas, @@ -161,6 +174,22 @@ class FibfanAddingPreviewMobile interactableDrawing.config.lineStyle, radius: 4, ); + + // Draw alignment guides on each edge point when dragging + if (_isDragging) { + drawPointAlignmentGuides( + canvas, + size, + startOffset, + lineColor: interactableDrawing.config.lineStyle.color, + ); + drawPointAlignmentGuides( + canvas, + size, + endOffset, + lineColor: interactableDrawing.config.lineStyle.color, + ); + } } } @@ -250,6 +279,67 @@ class FibfanAddingPreviewMobile } } + @override + void paintOverYAxis( + Canvas canvas, + Size size, + EpochToX epochToX, + QuoteToY quoteToY, + AnimationInfo animationInfo, + ChartConfig chartConfig, + ChartTheme chartTheme, + GetDrawingState getDrawingState, + ) { + // Draw labels for both edge points when dragging + if (_isDragging && + interactableDrawing.startPoint != null && + interactableDrawing.endPoint != null) { + // Draw labels for start point + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: interactableDrawing.startPoint!.quote, + pipSize: chartConfig.pipSize, + size: size, + color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + textStyle: interactableDrawing.config.labelStyle, + ); + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: interactableDrawing.startPoint!.epoch, + size: size, + textStyle: interactableDrawing.config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + + // Draw labels for end point + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: interactableDrawing.endPoint!.quote, + pipSize: chartConfig.pipSize, + size: size, + color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + textStyle: interactableDrawing.config.labelStyle, + ); + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: interactableDrawing.endPoint!.epoch, + size: size, + textStyle: interactableDrawing.config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: interactableDrawing.config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + } + @override void onCreateTap( TapUpDetails details, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index de32bcc4e..a99e8c624 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -6,17 +6,35 @@ import 'package:flutter/material.dart'; /// Helper class for Fibonacci Fan drawing operations class FibonacciFanHelpers { - /// Fibonacci ratios for the fan lines - static const List fibRatios = [0.0, 0.382, 0.5, 0.618, 1.0]; - - /// Labels for each Fibonacci level - static const List fibonacciLabels = [ - '100%', - '61.8%', - '50%', - '38.2%', - '0%', - ]; + /// Fibonacci levels with their ratios, labels, and color keys + static final Map> fibonacciLevels = { + 0.0: {'label': '0%', 'colorKey': 'level0'}, + 0.382: {'label': '38.2%', 'colorKey': 'level38_2'}, + 0.5: {'label': '50%', 'colorKey': 'level50'}, + 0.618: {'label': '61.8%', 'colorKey': 'level61_8'}, + 1.0: {'label': '100%', 'colorKey': 'level100'}, + }; + + /// Fibonacci ratios for the fan lines in the desired order (reversed for proper visual ordering) + static List get fibRatios => [1.0, 0.618, 0.5, 0.382, 0.0]; + + /// Labels for each Fibonacci level in the desired order + static List get fibonacciLabels => [ + fibonacciLevels[0.0]!['label']!, // 0% + fibonacciLevels[0.382]!['label']!, // 38.2% + fibonacciLevels[0.5]!['label']!, // 50% + fibonacciLevels[0.618]!['label']!, // 61.8% + fibonacciLevels[1.0]!['label']!, // 100% + ]; + + /// Color keys for each Fibonacci level in the desired visual order + static List get fibonacciColorKeys => [ + fibonacciLevels[0.0]!['colorKey']!, // level0 for 0% + fibonacciLevels[0.382]!['colorKey']!, // level38_2 for 38.2% + fibonacciLevels[0.5]!['colorKey']!, // level50 for 50% + fibonacciLevels[0.618]!['colorKey']!, // level61_8 for 61.8% + fibonacciLevels[1.0]!['colorKey']!, // level100 for 100% + ]; /// Draws the filled areas between fan lines static void drawFanFills( @@ -43,36 +61,59 @@ class FibonacciFanHelpers { // Extend lines to the edge of the screen final double screenWidth = size.width; - final double slope1 = - (fanPoint1.dy - startOffset.dy) / (fanPoint1.dx - startOffset.dx); - final double slope2 = - (fanPoint2.dy - startOffset.dy) / (fanPoint2.dx - startOffset.dx); - - final Offset extendedPoint1 = Offset( - screenWidth, - startOffset.dy + slope1 * (screenWidth - startOffset.dx), - ); - final Offset extendedPoint2 = Offset( - screenWidth, - startOffset.dy + slope2 * (screenWidth - startOffset.dx), - ); - - // Create path for the filled area - final Path fillPath = Path() - ..moveTo(startOffset.dx, startOffset.dy) - ..lineTo(extendedPoint1.dx, extendedPoint1.dy) - ..lineTo(extendedPoint2.dx, extendedPoint2.dy) - ..close(); - - // Draw filled area with alternating opacity - final double opacity = (i % 2 == 0) ? 0.1 : 0.05; - canvas.drawPath( - fillPath, - paintStyle.fillPaintStyle( - fillStyle.color.withOpacity(opacity), - fillStyle.thickness, - ), - ); + final double deltaXFan = fanPoint1.dx - startOffset.dx; + + // Handle vertical lines and avoid division by zero + Offset extendedPoint1, extendedPoint2; + + if (deltaXFan.abs() < 0.001) { + // Vertical lines - extend to top or bottom of screen + extendedPoint1 = Offset( + fanPoint1.dx, + fanPoint1.dy > startOffset.dy ? size.height : 0, + ); + extendedPoint2 = Offset( + fanPoint2.dx, + fanPoint2.dy > startOffset.dy ? size.height : 0, + ); + } else { + final double slope1 = (fanPoint1.dy - startOffset.dy) / deltaXFan; + final double slope2 = (fanPoint2.dy - startOffset.dy) / deltaXFan; + + extendedPoint1 = Offset( + screenWidth, + startOffset.dy + slope1 * (screenWidth - startOffset.dx), + ); + extendedPoint2 = Offset( + screenWidth, + startOffset.dy + slope2 * (screenWidth - startOffset.dx), + ); + } + + // Validate coordinates before creating path + if (!startOffset.dx.isNaN && + !startOffset.dy.isNaN && + !extendedPoint1.dx.isNaN && + !extendedPoint1.dy.isNaN && + !extendedPoint2.dx.isNaN && + !extendedPoint2.dy.isNaN) { + // Create path for the filled area + final Path fillPath = Path() + ..moveTo(startOffset.dx, startOffset.dy) + ..lineTo(extendedPoint1.dx, extendedPoint1.dy) + ..lineTo(extendedPoint2.dx, extendedPoint2.dy) + ..close(); + + // Draw filled area with alternating opacity + final double opacity = (i % 2 == 0) ? 0.1 : 0.05; + canvas.drawPath( + fillPath, + paintStyle.fillPaintStyle( + fillStyle.color.withOpacity(opacity), + fillStyle.thickness, + ), + ); + } } } @@ -87,21 +128,12 @@ class FibonacciFanHelpers { LineStyle lineStyle, { Map? fibonacciLevelColors, }) { - for (int i = 0; i < FibonacciFanHelpers.fibRatios.length; i++) { - final double ratio = FibonacciFanHelpers.fibRatios[i]; - - // Use custom color if provided, otherwise use default line style color - final List colorKeys = [ - 'level0', - 'level38_2', - 'level50', - 'level61_8', - 'level100' - ]; + for (int i = 0; i < fibRatios.length; i++) { + final double ratio = fibRatios[i]; + final String colorKey = fibonacciColorKeys[i]; final Color lineColor = (fibonacciLevelColors != null && - i < colorKeys.length && - fibonacciLevelColors.containsKey(colorKeys[i])) - ? fibonacciLevelColors[colorKeys[i]]! + fibonacciLevelColors.containsKey(colorKey)) + ? fibonacciLevelColors[colorKey]! : lineStyle.color; final Paint linePaint = paintStyle.linePaintStyle( @@ -116,14 +148,31 @@ class FibonacciFanHelpers { // Extend line to the edge of the screen final double screenWidth = size.width; - final double slope = - (fanPoint.dy - startOffset.dy) / (fanPoint.dx - startOffset.dx); - final Offset extendedPoint = Offset( - screenWidth, - startOffset.dy + slope * (screenWidth - startOffset.dx), - ); - - canvas.drawLine(startOffset, extendedPoint, linePaint); + final double deltaXFan = fanPoint.dx - startOffset.dx; + + // Handle vertical lines and avoid division by zero + Offset extendedPoint; + if (deltaXFan.abs() < 0.001) { + // Vertical line - extend to top or bottom of screen + extendedPoint = Offset( + fanPoint.dx, + fanPoint.dy > startOffset.dy ? size.height : 0, + ); + } else { + final double slope = (fanPoint.dy - startOffset.dy) / deltaXFan; + extendedPoint = Offset( + screenWidth, + startOffset.dy + slope * (screenWidth - startOffset.dx), + ); + } + + // Validate coordinates before drawing + if (!startOffset.dx.isNaN && + !startOffset.dy.isNaN && + !extendedPoint.dx.isNaN && + !extendedPoint.dy.isNaN) { + canvas.drawLine(startOffset, extendedPoint, linePaint); + } } } @@ -138,11 +187,11 @@ class FibonacciFanHelpers { required List fibonacciLabels, Map? fibonacciLevelColors, }) { - final List labelsToUse = fibonacciLabels; + // final List labelsToUse = fibonacciLabels; for (int i = 0; i < FibonacciFanHelpers.fibRatios.length; i++) { final double ratio = FibonacciFanHelpers.fibRatios[i]; - final String label = i < labelsToUse.length ? labelsToUse[i] : ''; + final String label = i < fibonacciLabels.length ? fibonacciLabels[i] : ''; final Offset fanPoint = Offset( startOffset.dx + deltaX, @@ -162,17 +211,10 @@ class FibonacciFanHelpers { ); // Use custom color if provided, otherwise use default line style color - final List colorKeys = [ - 'level0', - 'level38_2', - 'level50', - 'level61_8', - 'level100' - ]; + final String colorKey = fibonacciColorKeys[i]; final Color labelColor = (fibonacciLevelColors != null && - i < colorKeys.length && - fibonacciLevelColors.containsKey(colorKeys[i])) - ? fibonacciLevelColors[colorKeys[i]]! + fibonacciLevelColors.containsKey(colorKey)) + ? fibonacciLevelColors[colorKey]! : lineStyle.color; final TextPainter textPainter = TextPainter( From a49fe19fd3f6b9dd44a95dc2f2e1705f2cd8cd2f Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 11:37:43 +0800 Subject: [PATCH 279/311] refactor(fibfan): extract common validation logic into utility methods - Add areCoordinatesValid validation method to FibonacciFanHelpers class - Add isOffsetValid validation method to FibonacciFanHelpers class - Add areTwoOffsetsValid validation method to FibonacciFanHelpers class - Add areDeltasMeaningful validation method to FibonacciFanHelpers class - Update FibonacciFanHelpers, FibfanAddingPreviewDesktop, and FibfanAddingPreviewMobile classes to use these methods Reduces code duplication by centralizing validation logic into one utility class --- .../fibfan/fibfan_adding_preview_desktop.dart | 8 ++--- .../fibfan/fibfan_adding_preview_mobile.dart | 18 +++------- .../interactable_drawings/fibfan/helpers.dart | 33 +++++++++++++------ 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index 303b31792..bebbfc77a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -71,10 +71,8 @@ class FibfanAddingPreviewDesktop ); // Validate coordinates before proceeding - if (startOffset.dx.isNaN || - startOffset.dy.isNaN || - _hoverPosition!.dx.isNaN || - _hoverPosition!.dy.isNaN) { + if (!FibonacciFanHelpers.areTwoOffsetsValid( + startOffset, _hoverPosition!)) { return; } @@ -82,7 +80,7 @@ class FibfanAddingPreviewDesktop final double deltaY = _hoverPosition!.dy - startOffset.dy; // Only draw if we have meaningful deltas - if (deltaX.abs() > 1 || deltaY.abs() > 1) { + if (FibonacciFanHelpers.areDeltasMeaningful(deltaX, deltaY)) { // Draw filled areas between fan lines FibonacciFanHelpers.drawFanFills( canvas, startOffset, deltaX, deltaY, size, paintStyle, fillStyle); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index c52179528..51d15ac8e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -137,10 +137,7 @@ class FibfanAddingPreviewMobile ); // Validate coordinates before proceeding - if (startOffset.dx.isNaN || - startOffset.dy.isNaN || - endOffset.dx.isNaN || - endOffset.dy.isNaN) { + if (!FibonacciFanHelpers.areTwoOffsetsValid(startOffset, endOffset)) { return; } @@ -149,7 +146,7 @@ class FibfanAddingPreviewMobile final double deltaY = endOffset.dy - startOffset.dy; // Only draw if we have meaningful deltas - if (deltaX.abs() > 1 || deltaY.abs() > 1) { + if (FibonacciFanHelpers.areDeltasMeaningful(deltaX, deltaY)) { // Draw preview fan lines with dashed style _drawPreviewFanLines(canvas, startOffset, deltaX, deltaY, size); } @@ -241,11 +238,7 @@ class FibfanAddingPreviewMobile final double distance = (end - start).distance; // Handle edge cases - if (distance <= 0 || - start.dx.isNaN || - start.dy.isNaN || - end.dx.isNaN || - end.dy.isNaN) { + if (distance <= 0 || !FibonacciFanHelpers.areTwoOffsetsValid(start, end)) { return; } @@ -266,10 +259,7 @@ class FibfanAddingPreviewMobile start + direction * (currentDistance + actualSegmentLength); // Validate segment points before drawing - if (!segmentStart.dx.isNaN && - !segmentStart.dy.isNaN && - !segmentEnd.dx.isNaN && - !segmentEnd.dy.isNaN) { + if (FibonacciFanHelpers.areTwoOffsetsValid(segmentStart, segmentEnd)) { canvas.drawLine(segmentStart, segmentEnd, paint); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index a99e8c624..cc591281e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -6,6 +6,27 @@ import 'package:flutter/material.dart'; /// Helper class for Fibonacci Fan drawing operations class FibonacciFanHelpers { + /// Validates that all coordinates in the given offsets are not NaN + static bool areCoordinatesValid(List offsets) { + return offsets.every((offset) => !offset.dx.isNaN && !offset.dy.isNaN); + } + + /// Validates that a single offset has valid coordinates + static bool isOffsetValid(Offset offset) { + return !offset.dx.isNaN && !offset.dy.isNaN; + } + + /// Validates that two offsets have valid coordinates + static bool areTwoOffsetsValid(Offset offset1, Offset offset2) { + return isOffsetValid(offset1) && isOffsetValid(offset2); + } + + /// Validates that deltas are meaningful (not too small) + static bool areDeltasMeaningful(double deltaX, double deltaY, + {double threshold = 1.0}) { + return deltaX.abs() > threshold || deltaY.abs() > threshold; + } + /// Fibonacci levels with their ratios, labels, and color keys static final Map> fibonacciLevels = { 0.0: {'label': '0%', 'colorKey': 'level0'}, @@ -91,12 +112,7 @@ class FibonacciFanHelpers { } // Validate coordinates before creating path - if (!startOffset.dx.isNaN && - !startOffset.dy.isNaN && - !extendedPoint1.dx.isNaN && - !extendedPoint1.dy.isNaN && - !extendedPoint2.dx.isNaN && - !extendedPoint2.dy.isNaN) { + if (areCoordinatesValid([startOffset, extendedPoint1, extendedPoint2])) { // Create path for the filled area final Path fillPath = Path() ..moveTo(startOffset.dx, startOffset.dy) @@ -167,10 +183,7 @@ class FibonacciFanHelpers { } // Validate coordinates before drawing - if (!startOffset.dx.isNaN && - !startOffset.dy.isNaN && - !extendedPoint.dx.isNaN && - !extendedPoint.dy.isNaN) { + if (areTwoOffsetsValid(startOffset, extendedPoint)) { canvas.drawLine(startOffset, extendedPoint, linePaint); } } From eb6a8bcae18b1da0df1b1713ccf9b1c19f0682ad Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 12:25:38 +0800 Subject: [PATCH 280/311] refactor(fibfan): Replace magic numbers with centralized constants - Add FibfanConstants class in helpers.dart with organized constant groups: * Validation thresholds (deltaThreshold, verticalLineThreshold, minLineLength) * Mobile positioning ratios and fallback coordinates * Drawing constants (dash properties, point radius, opacity values) * Visual effects (focused circle dimensions, label positioning) * UI constants (toolbar dimensions, spacing, typography) - Update fibfan_adding_preview_mobile.dart: * Replace hardcoded positioning ratios with named constants * Use constants for dash line properties and point radius * Apply validation threshold constants for coordinate checks - Update fibfan_interactable_drawing.dart: * Replace UI magic numbers with toolbar constants * Use visual effect constants for focused circles * Apply validation constants for line length checks - Add helper methods in FibonacciFanHelpers: * areTwoOffsetsValid() for coordinate validation * areDeltasMeaningful() for delta threshold checking Benefits: - Eliminates 25+ magic numbers across the codebase - Improves code maintainability and readability - Centralizes configuration in a single location - Provides self-documenting constant names - Enables easier customization of drawing behavior --- .../fibfan/fibfan_adding_preview_mobile.dart | 29 +++++---- .../fibfan/fibfan_interactable_drawing.dart | 33 ++++++---- .../interactable_drawings/fibfan/helpers.dart | 65 ++++++++++++++++--- 3 files changed, 95 insertions(+), 32 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 51d15ac8e..27bd21d84 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -31,8 +31,10 @@ class FibfanAddingPreviewMobile if (layerSize != null) { // Position start point around the chart data area (middle-right region) - final double startX = layerSize.width * 0.06; - final double startY = layerSize.height * 0.5; + final double startX = + layerSize.width * FibfanConstants.mobileStartXRatio; + final double startY = + layerSize.height * FibfanConstants.mobileStartYRatio; interactableDrawing.startPoint = EdgePoint( epoch: interactiveLayer.epochFromX(startX), @@ -54,8 +56,9 @@ class FibfanAddingPreviewMobile if (layerSize != null) { // Position end point to the right and above start point // This creates a proper upward-oriented Fibonacci fan - final double endX = layerSize.width * 0.65; - final double endY = layerSize.height * 0.3; // Above start point (0.5) + final double endX = layerSize.width * FibfanConstants.mobileEndXRatio; + final double endY = layerSize.height * + FibfanConstants.mobileEndYRatio; // Above start point (0.5) interactableDrawing.endPoint = EdgePoint( epoch: interactiveLayer.epochFromX(endX), @@ -63,8 +66,9 @@ class FibfanAddingPreviewMobile ); } else { // Fallback with proper orientation if size is not available - const double fallbackX = 50; - const double fallbackY = -50; // Above start point + const double fallbackX = FibfanConstants.mobileFallbackX; + const double fallbackY = + FibfanConstants.mobileFallbackY; // Above start point interactableDrawing.endPoint = EdgePoint( epoch: interactiveLayer.epochFromX(fallbackX), @@ -160,7 +164,7 @@ class FibfanAddingPreviewMobile canvas, paintStyle, interactableDrawing.config.lineStyle, - radius: 4, + radius: FibfanConstants.pointRadius, ); drawPointOffset( endOffset, @@ -169,7 +173,7 @@ class FibfanAddingPreviewMobile canvas, paintStyle, interactableDrawing.config.lineStyle, - radius: 4, + radius: FibfanConstants.pointRadius, ); // Draw alignment guides on each edge point when dragging @@ -199,7 +203,8 @@ class FibfanAddingPreviewMobile Size size, ) { final Paint dashPaint = Paint() - ..color = interactableDrawing.config.lineStyle.color.withOpacity(0.7) + ..color = interactableDrawing.config.lineStyle.color + .withOpacity(FibfanConstants.dashOpacity) ..style = PaintingStyle.stroke ..strokeWidth = interactableDrawing.config.lineStyle.thickness; @@ -215,7 +220,7 @@ class FibfanAddingPreviewMobile // Handle vertical lines and avoid division by zero Offset extendedPoint; - if (deltaXFan.abs() < 0.001) { + if (deltaXFan.abs() < FibfanConstants.verticalLineThreshold) { // Vertical line extendedPoint = Offset(fanPoint.dx, size.height); } else { @@ -233,8 +238,8 @@ class FibfanAddingPreviewMobile /// Draws a dashed line between two points void _drawDashedLine(Canvas canvas, Offset start, Offset end, Paint paint) { - const double dashWidth = 5; - const double dashSpace = 3; + const double dashWidth = FibfanConstants.dashWidth; + const double dashSpace = FibfanConstants.dashSpace; final double distance = (end - start).distance; // Handle edge cases diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index b30fa2b9a..f744a1980 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -178,7 +178,7 @@ class FibfanInteractableDrawing // Calculate perpendicular distance from point to line final double lineLength = (extendedEndPoint - startOffset).distance; - if (lineLength < 1) { + if (lineLength < FibfanConstants.minLineLength) { continue; } @@ -260,13 +260,21 @@ class FibfanInteractableDrawing lineStyle, canvas, startOffset, - 10 * animationInfo.stateChangePercent, - 3 * animationInfo.stateChangePercent, + FibfanConstants.focusedCircleRadius * + animationInfo.stateChangePercent, + FibfanConstants.focusedCircleStroke * + animationInfo.stateChangePercent, endOffset, ); } else if (drawingState.contains(DrawingToolState.hovered)) { drawPointsFocusedCircle( - paintStyle, lineStyle, canvas, startOffset, 10, 3, endOffset); + paintStyle, + lineStyle, + canvas, + startOffset, + FibfanConstants.focusedCircleRadius, + FibfanConstants.focusedCircleStroke, + endOffset); } // Draw alignment guides when dragging @@ -540,14 +548,14 @@ class FibfanInteractableDrawing Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => Row( children: [ _buildLineThicknessIcon(), - const SizedBox(width: 4), + const SizedBox(width: FibfanConstants.toolbarSpacing), _buildColorPickerIcon(onUpdate) ], ); Widget _buildColorPickerIcon(UpdateDrawingTool onUpdate) => SizedBox( - width: 32, - height: 32, + width: FibfanConstants.toolbarIconSize, + height: FibfanConstants.toolbarIconSize, child: ColorPicker( currentColor: config.lineStyle.color, onColorChanged: (newColor) => onUpdate(config.copyWith( @@ -558,15 +566,16 @@ class FibfanInteractableDrawing ); Widget _buildLineThicknessIcon() => SizedBox( - width: 32, - height: 32, + width: FibfanConstants.toolbarIconSize, + height: FibfanConstants.toolbarIconSize, child: TextButton( style: TextButton.styleFrom( foregroundColor: Colors.white38, alignment: Alignment.center, padding: const EdgeInsets.symmetric(), shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(4), + borderRadius: + BorderRadius.circular(FibfanConstants.toolbarBorderRadius), ), ), onPressed: () { @@ -575,10 +584,10 @@ class FibfanInteractableDrawing child: Text( '${config.lineStyle.thickness.toInt()}px', style: const TextStyle( - fontSize: 14, + fontSize: FibfanConstants.toolbarFontSize, color: CoreDesignTokens.coreColorSolidSlate50, fontWeight: FontWeight.normal, - height: 2, + height: FibfanConstants.toolbarTextHeight, ), textAlign: TextAlign.center, ), diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index cc591281e..8be14dcb4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -4,6 +4,49 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; +/// Constants for Fibonacci Fan drawing operations +class FibfanConstants { + // Validation thresholds + static const double defaultDeltaThreshold = 1.0; + static const double verticalLineThreshold = 0.001; + static const double minLineLength = 1.0; + + // Mobile positioning constants + static const double mobileStartXRatio = 0.06; + static const double mobileStartYRatio = 0.5; + static const double mobileEndXRatio = 0.65; + static const double mobileEndYRatio = 0.3; + static const double mobileFallbackX = 50.0; + static const double mobileFallbackY = -50.0; + + // Drawing constants + static const double dashWidth = 5.0; + static const double dashSpace = 3.0; + static const double dashOpacity = 0.7; + static const double pointRadius = 4.0; + + // Visual effect constants + static const double focusedCircleRadius = 10.0; + static const double focusedCircleStroke = 3.0; + static const double labelDistanceFromLine = 5.0; + static const double labelPositionMultiplier = 1.02; + static const double labelFontSize = 12.0; + + // Fill opacity constants + static const double evenFillOpacity = 0.1; + static const double oddFillOpacity = 0.05; + + // UI constants + static const double toolbarIconSize = 32.0; + static const double toolbarSpacing = 4.0; + static const double toolbarBorderRadius = 4.0; + static const double toolbarFontSize = 14.0; + static const double toolbarTextHeight = 2.0; + + // Coordinate defaults + static const double defaultCoordinate = 0.0; +} + /// Helper class for Fibonacci Fan drawing operations class FibonacciFanHelpers { /// Validates that all coordinates in the given offsets are not NaN @@ -23,7 +66,7 @@ class FibonacciFanHelpers { /// Validates that deltas are meaningful (not too small) static bool areDeltasMeaningful(double deltaX, double deltaY, - {double threshold = 1.0}) { + {double threshold = FibfanConstants.defaultDeltaThreshold}) { return deltaX.abs() > threshold || deltaY.abs() > threshold; } @@ -87,7 +130,7 @@ class FibonacciFanHelpers { // Handle vertical lines and avoid division by zero Offset extendedPoint1, extendedPoint2; - if (deltaXFan.abs() < 0.001) { + if (deltaXFan.abs() < FibfanConstants.verticalLineThreshold) { // Vertical lines - extend to top or bottom of screen extendedPoint1 = Offset( fanPoint1.dx, @@ -121,7 +164,9 @@ class FibonacciFanHelpers { ..close(); // Draw filled area with alternating opacity - final double opacity = (i % 2 == 0) ? 0.1 : 0.05; + final double opacity = (i % 2 == 0) + ? FibfanConstants.evenFillOpacity + : FibfanConstants.oddFillOpacity; canvas.drawPath( fillPath, paintStyle.fillPaintStyle( @@ -168,7 +213,7 @@ class FibonacciFanHelpers { // Handle vertical lines and avoid division by zero Offset extendedPoint; - if (deltaXFan.abs() < 0.001) { + if (deltaXFan.abs() < FibfanConstants.verticalLineThreshold) { // Vertical line - extend to top or bottom of screen extendedPoint = Offset( fanPoint.dx, @@ -219,8 +264,12 @@ class FibonacciFanHelpers { // Calculate label position along the line final Offset labelPosition = Offset( - startOffset.dx + (fanPoint.dx - startOffset.dx) * 1.02, - startOffset.dy + (fanPoint.dy - startOffset.dy) * 1.02, + startOffset.dx + + (fanPoint.dx - startOffset.dx) * + FibfanConstants.labelPositionMultiplier, + startOffset.dy + + (fanPoint.dy - startOffset.dy) * + FibfanConstants.labelPositionMultiplier, ); // Use custom color if provided, otherwise use default line style color @@ -235,7 +284,7 @@ class FibonacciFanHelpers { text: label, style: TextStyle( color: labelColor, - fontSize: 12, + fontSize: FibfanConstants.labelFontSize, fontWeight: FontWeight.w500, ), ), @@ -254,7 +303,7 @@ class FibonacciFanHelpers { // Adjust text position to left-align it when rotated final Offset textOffset = Offset( - 5, // Small offset from the line + FibfanConstants.labelDistanceFromLine, // Small offset from the line -textPainter.height, ); From b68ec6d3c728ab64f876268b018bf60634f1ba52 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 13:24:00 +0800 Subject: [PATCH 281/311] docs(fibfan): Add comprehensive documentation and fix analyzer issues - Add detailed class-level documentation for FibfanInteractableDrawing * Explain technical analysis context and usage patterns * Document interaction states (creating, selected, dragging, hovered) * Detail mobile vs desktop behavior differences * Include key features and capabilities overview - Enhance FibfanConstants class documentation * Add comprehensive class overview explaining centralization benefits * Document 8 organized constant categories with clear section headers * Provide detailed documentation for each constant including: - Purpose and usage context - Specific value meaning and rationale - Cross-references to related functionality - Improve FibonacciFanHelpers class documentation * Add technical analysis context for Fibonacci Fan tools * Document Fibonacci levels with mathematical explanations * Explain visual ordering rationale for proper rendering * Add comprehensive method documentation with examples - Document FibfanAddingPreviewDesktop class * Explain two-step creation workflow for desktop * Detail precision features and mouse-based interactions * Document real-time preview and visual feedback systems - Document FibfanAddingPreviewMobile class * Explain touch-optimized auto-positioning strategy * Detail single-tap completion workflow * Document mobile-specific design decisions - Add comprehensive documentation for all helper methods: * Parameter descriptions with types and purposes * Return value explanations * Usage examples and code snippets * Algorithm step-by-step explanations * Edge case handling documentation - Remove unused imports: * InteractiveLayerDesktopBehaviour from fibfan_adding_preview_desktop.dart * InteractiveLayerMobileBehaviour from fibfan_adding_preview_mobile.dart - Fix prefer_int_literals warnings (17 instances): * Change double literals to integers where appropriate * Maintain decimal precision for mathematical constants * Improve code readability following Dart best practices - Replace magic number validations with helper method calls - Use centralized constants for all threshold checks - Improve coordinate validation with descriptive method names - Eliminates all Flutter analyzer warnings and infos - Provides enterprise-level documentation quality - Improves code maintainability and developer onboarding - Explains technical analysis context for better domain understanding - Centralizes configuration through well-documented constants - Enables easier customization and extension of drawing behavior Resolves: Clean flutter analyze output with comprehensive documentation --- .../fibfan/fibfan_adding_preview_desktop.dart | 53 ++- .../fibfan/fibfan_adding_preview_mobile.dart | 46 +- .../fibfan/fibfan_interactable_drawing.dart | 70 ++- .../interactable_drawings/fibfan/helpers.dart | 432 ++++++++++++++++-- 4 files changed, 548 insertions(+), 53 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index bebbfc77a..b7f76120e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -6,7 +6,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_desktop_behaviour.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'; @@ -16,17 +15,63 @@ import '../../helpers/types.dart'; import '../drawing_adding_preview.dart'; import 'fibfan_interactable_drawing.dart'; -/// A class to show a preview and handle adding -/// [FibfanInteractableDrawing] to the chart. It's for when we're on -/// [InteractiveLayerDesktopBehaviour] +/// Desktop-optimized preview handler for Fibonacci Fan creation. +/// +/// This class provides a mouse-friendly interface for creating Fibonacci Fan +/// drawings on desktop devices. It implements a two-step creation process +/// that leverages mouse hover and click interactions for precise point placement. +/// +/// **Desktop-Specific Features:** +/// - Two-step creation process (first click for start, second for end) +/// - Real-time hover preview showing fan from start point to cursor +/// - Precise mouse-based point placement +/// - Alignment guides during point placement +/// - Axis labels showing exact coordinate values +/// +/// **Creation Workflow:** +/// 1. User selects Fibonacci Fan tool +/// 2. First click sets the start point +/// 3. Mouse movement shows live preview fan from start to cursor +/// 4. Second click sets the end point and completes the drawing +/// +/// **Visual Feedback:** +/// - Alignment guides appear at hover position and start point +/// - Live preview fan lines follow mouse movement +/// - Coordinate labels on both axes during creation +/// - Smooth transitions between creation states +/// +/// **Precision Features:** +/// - Pixel-perfect point placement with mouse precision +/// - Real-time coordinate validation and feedback +/// - Visual guides for accurate technical analysis placement class FibfanAddingPreviewDesktop extends DrawingAddingPreview { /// Initializes [FibfanAddingPreviewDesktop]. + /// + /// Creates a desktop-optimized preview handler that manages the two-step + /// creation process for Fibonacci Fan drawings. The handler tracks mouse + /// position and manages the creation state transitions. + /// + /// **Parameters:** + /// - [interactiveLayerBehaviour]: Desktop interaction behavior handler + /// - [interactableDrawing]: The Fibonacci Fan drawing being created FibfanAddingPreviewDesktop({ required super.interactiveLayerBehaviour, required super.interactableDrawing, }); + /// Current mouse hover position for real-time preview. + /// + /// Tracks the mouse cursor position to enable live preview functionality. + /// When the start point is set but end point is null, a preview fan is + /// drawn from the start point to this hover position, giving users + /// immediate visual feedback of the final result. + /// + /// **Usage:** + /// - Updated continuously during mouse movement via [onHover] + /// - Used in [paint] method to render preview fan lines + /// - Enables real-time coordinate display on chart axes + /// - Reset when creation process completes Offset? _hoverPosition; @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 27bd21d84..e4503bc0f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -5,7 +5,6 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too 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/interactive_layer/helpers/paint_helpers.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; @@ -15,12 +14,49 @@ import '../fibfan/helpers.dart'; import '../drawing_adding_preview.dart'; import 'fibfan_interactable_drawing.dart'; -/// A class to show a preview and handle adding a -/// [FibfanInteractableDrawing] to the chart. It's for when we're on -/// [InteractiveLayerMobileBehaviour]. +/// Mobile-optimized preview handler for Fibonacci Fan creation. +/// +/// This class provides a touch-friendly interface for creating Fibonacci Fan +/// drawings on mobile devices. Unlike desktop behavior that relies on mouse +/// hover and click interactions, mobile behavior pre-positions both points +/// and allows immediate drag-based editing. +/// +/// **Mobile-Specific Features:** +/// - Auto-positioning of start and end points for immediate usability +/// - Touch-optimized drag interactions for point adjustment +/// - Dashed line previews to distinguish from final drawings +/// - Single-tap completion (no multi-step creation process) +/// - Larger touch targets for better mobile interaction +/// +/// **Positioning Strategy:** +/// The mobile implementation automatically places the fan points in optimal +/// positions based on screen dimensions: +/// - Start point: 6% from left edge, vertically centered (50%) +/// - End point: 65% from left edge, upper portion (30%) +/// - This creates an upward-trending fan suitable for most analysis scenarios +/// +/// **User Workflow:** +/// 1. User selects Fibonacci Fan tool +/// 2. Preview appears with pre-positioned points +/// 3. User can drag individual points or entire fan to adjust +/// 4. Single tap completes the drawing class FibfanAddingPreviewMobile extends DrawingAddingPreview { - /// Initializes [FibfanAddingPreviewMobile]. + /// Initializes [FibfanAddingPreviewMobile] with auto-positioned points. + /// + /// Creates a mobile-optimized preview that automatically positions the + /// start and end points in sensible locations based on screen dimensions. + /// This eliminates the need for multi-step point placement on touch devices. + /// + /// **Auto-Positioning Logic:** + /// - Calculates optimal positions using screen dimension ratios + /// - Places start point in left-center area for trend origin + /// - Places end point in upper-right area for upward trend + /// - Provides fallback coordinates if screen dimensions unavailable + /// + /// **Parameters:** + /// - [interactiveLayerBehaviour]: Mobile interaction behavior handler + /// - [interactableDrawing]: The Fibonacci Fan drawing being created FibfanAddingPreviewMobile({ required super.interactiveLayerBehaviour, required super.interactableDrawing, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index f744a1980..be5de8440 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -29,9 +29,46 @@ import 'fibfan_adding_preview_desktop.dart'; import 'fibfan_adding_preview_mobile.dart'; /// Interactable drawing for Fibonacci Fan drawing tool. +/// +/// This class implements a complete Fibonacci Fan technical analysis tool that allows +/// users to draw, interact with, and customize fan lines based on Fibonacci ratios. +/// The fan consists of multiple trend lines emanating from a start point, each +/// representing different Fibonacci retracement levels (0%, 38.2%, 50%, 61.8%, 100%). +/// +/// **Key Features:** +/// - Interactive creation with two-point definition (start and end points) +/// - Real-time preview during creation and editing +/// - Drag support for individual points or entire fan +/// - Hit testing for precise user interaction +/// - Customizable colors and styling +/// - Mobile and desktop optimized behaviors +/// - Automatic label display with percentage values +/// - Fill areas between fan lines for visual clarity +/// +/// **Usage in Technical Analysis:** +/// Fibonacci fans help traders identify potential support and resistance levels +/// by projecting Fibonacci ratios from a significant price movement. The fan +/// lines act as dynamic trend lines that can guide trading decisions. +/// +/// **Interaction States:** +/// - **Creating**: User is placing the start and end points +/// - **Selected**: Fan is selected and shows all visual elements +/// - **Dragging**: User is moving points or the entire fan +/// - **Hovered**: Mouse is over the fan (desktop only) class FibfanInteractableDrawing extends InteractableDrawing { /// Initializes [FibfanInteractableDrawing]. + /// + /// Creates a new Fibonacci Fan drawing with the specified configuration + /// and initial points. The drawing can be created with null points for + /// interactive creation or with predefined points for loading saved drawings. + /// + /// **Parameters:** + /// - [config]: Drawing configuration including colors, styles, and Fibonacci levels + /// - [startPoint]: Initial start point of the fan (can be null for interactive creation) + /// - [endPoint]: Initial end point of the fan (can be null for interactive creation) + /// - [drawingContext]: Context providing canvas dimensions and coordinate conversion + /// - [getDrawingState]: Function to retrieve current drawing state (selected, dragging, etc.) FibfanInteractableDrawing({ required FibfanDrawingToolConfig config, required this.startPoint, @@ -40,19 +77,40 @@ class FibfanInteractableDrawing required super.getDrawingState, }) : super(drawingConfig: config); - /// Start point of the fan. + /// Start point of the fan in epoch/quote coordinates. + /// + /// This point serves as the origin for all fan lines. In technical analysis, + /// this is typically placed at a significant price level (support, resistance, + /// or pivot point) from which Fibonacci projections are calculated. EdgePoint? startPoint; - /// End point of the fan. + /// End point of the fan in epoch/quote coordinates. + /// + /// This point defines the direction and scale of the fan. The vector from + /// start to end point determines the base angle and magnitude for calculating + /// all Fibonacci fan lines. Each fan line uses this vector multiplied by + /// its respective Fibonacci ratio. EdgePoint? endPoint; - /// Tracks which point is being dragged, if any + /// Tracks which point is being dragged during user interaction. /// - /// [null]: dragging the whole fan. - /// [true]: dragging the start point. - /// [false]: dragging the end point. + /// This state variable enables precise drag behavior by distinguishing between: + /// - `null`: User is dragging the entire fan (both points move together) + /// - `true`: User is dragging only the start point + /// - `false`: User is dragging only the end point + /// + /// The value is set during [onDragStart] based on hit testing and cleared + /// during [onDragEnd] to reset the interaction state. bool? isDraggingStartPoint; + /// Current hover position for desktop interactions. + /// + /// Stores the mouse position during hover events to enable real-time + /// preview functionality. This is used primarily during the creation + /// process to show a preview fan from the start point to the cursor. + /// + /// **Note:** This is only used on desktop platforms where hover events + /// are available. Mobile platforms use touch-based interactions instead. Offset? _hoverPosition; @override diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index 8be14dcb4..8022a0544 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -4,73 +4,314 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; -/// Constants for Fibonacci Fan drawing operations +/// Constants for Fibonacci Fan drawing operations. +/// +/// This class centralizes all magic numbers used throughout the Fibonacci Fan +/// implementation to improve maintainability and provide clear semantic meaning +/// to numerical values. class FibfanConstants { - // Validation thresholds - static const double defaultDeltaThreshold = 1.0; + /// Private constructor to prevent instantiation of this utility class. + FibfanConstants._(); + + // ========== Validation Thresholds ========== + + /// Minimum meaningful delta threshold for coordinate differences. + /// + /// Used to determine if the difference between two coordinates is significant + /// enough to warrant drawing operations. Values below this threshold are + /// considered too small to be visually meaningful. + static const double defaultDeltaThreshold = 1; + + /// Threshold for detecting vertical lines to avoid division by zero. + /// + /// When the horizontal delta (deltaX) is below this threshold, the line + /// is considered vertical and special handling is applied to avoid + /// mathematical errors in slope calculations. static const double verticalLineThreshold = 0.001; - static const double minLineLength = 1.0; - // Mobile positioning constants + /// Minimum line length required for processing fan lines. + /// + /// Lines shorter than this value are skipped during hit testing and + /// other operations to avoid unnecessary calculations and potential + /// visual artifacts. + static const double minLineLength = 1; + + // ========== Mobile Positioning Constants ========== + + /// X-axis ratio for positioning the start point on mobile devices. + /// + /// Represents the fraction of screen width where the fan's start point + /// should be positioned (6% from the left edge). static const double mobileStartXRatio = 0.06; + + /// Y-axis ratio for positioning the start point on mobile devices. + /// + /// Represents the fraction of screen height where the fan's start point + /// should be positioned (50% - center vertically). static const double mobileStartYRatio = 0.5; + + /// X-axis ratio for positioning the end point on mobile devices. + /// + /// Represents the fraction of screen width where the fan's end point + /// should be positioned (65% from the left edge). static const double mobileEndXRatio = 0.65; + + /// Y-axis ratio for positioning the end point on mobile devices. + /// + /// Represents the fraction of screen height where the fan's end point + /// should be positioned (30% - upper portion of screen). static const double mobileEndYRatio = 0.3; - static const double mobileFallbackX = 50.0; - static const double mobileFallbackY = -50.0; - // Drawing constants - static const double dashWidth = 5.0; - static const double dashSpace = 3.0; + /// Fallback X coordinate when screen size is unavailable on mobile. + /// + /// Used as a default horizontal position when the drawing context + /// cannot provide accurate screen dimensions. + static const double mobileFallbackX = 50; + + /// Fallback Y coordinate when screen size is unavailable on mobile. + /// + /// Used as a default vertical position when the drawing context + /// cannot provide accurate screen dimensions. Negative value places + /// the point above the start point. + static const double mobileFallbackY = -50; + + // ========== Drawing Constants ========== + + /// Width of each dash segment in dashed lines. + /// + /// Controls the length of visible segments when drawing dashed + /// preview lines in mobile mode. + static const double dashWidth = 5; + + /// Width of each space between dash segments. + /// + /// Controls the length of invisible gaps between visible segments + /// in dashed preview lines. + static const double dashSpace = 3; + + /// Opacity level for dashed preview lines. + /// + /// Applied to preview fan lines to make them visually distinct + /// from final drawn lines (70% opacity). static const double dashOpacity = 0.7; - static const double pointRadius = 4.0; - // Visual effect constants - static const double focusedCircleRadius = 10.0; - static const double focusedCircleStroke = 3.0; - static const double labelDistanceFromLine = 5.0; + /// Radius for drawing endpoint circles. + /// + /// Size of the circular indicators drawn at the start and end + /// points of the Fibonacci fan. + static const double pointRadius = 4; + + // ========== Visual Effect Constants ========== + + /// Radius of the focused circle effect around endpoints. + /// + /// Size of the glowing circle effect displayed around fan endpoints + /// when the drawing is selected or being dragged. + static const double focusedCircleRadius = 10; + + /// Stroke width of the focused circle effect. + /// + /// Thickness of the border for the glowing circle effect around + /// fan endpoints during interaction states. + static const double focusedCircleStroke = 3; + + /// Distance offset for labels from their corresponding fan lines. + /// + /// Horizontal spacing between Fibonacci level labels and their + /// associated trend lines to prevent visual overlap. + static const double labelDistanceFromLine = 5; + + /// Multiplier for positioning labels along fan lines. + /// + /// Factor used to position labels slightly beyond the fan endpoint + /// along each trend line (102% of the line length). static const double labelPositionMultiplier = 1.02; - static const double labelFontSize = 12.0; - // Fill opacity constants + /// Font size for Fibonacci level labels. + /// + /// Text size used for displaying percentage labels (0%, 38.2%, etc.) + /// next to each fan line. + static const double labelFontSize = 12; + + // ========== Fill Opacity Constants ========== + + /// Opacity for even-indexed fill areas between fan lines. + /// + /// Applied to alternating fill regions to create visual distinction + /// between different Fibonacci levels (10% opacity). static const double evenFillOpacity = 0.1; - static const double oddFillOpacity = 0.05; - // UI constants - static const double toolbarIconSize = 32.0; - static const double toolbarSpacing = 4.0; - static const double toolbarBorderRadius = 4.0; - static const double toolbarFontSize = 14.0; - static const double toolbarTextHeight = 2.0; + /// Opacity for odd-indexed fill areas between fan lines. + /// + /// Applied to alternating fill regions to create visual distinction + /// between different Fibonacci levels (5% opacity). + static const double oddFillOpacity = 0.05; - // Coordinate defaults - static const double defaultCoordinate = 0.0; + // ========== UI Constants ========== + + /// Size for toolbar icons (width and height). + /// + /// Dimensions for interactive elements in the drawing tool's + /// configuration toolbar (32x32 pixels). + static const double toolbarIconSize = 32; + + /// Spacing between toolbar elements. + /// + /// Horizontal gap between different controls in the drawing + /// tool's configuration toolbar. + static const double toolbarSpacing = 4; + + /// Border radius for toolbar buttons. + /// + /// Corner rounding applied to interactive buttons in the + /// drawing tool's configuration interface. + static const double toolbarBorderRadius = 4; + + /// Font size for toolbar text elements. + /// + /// Text size used for labels and values displayed in the + /// drawing tool's configuration toolbar. + static const double toolbarFontSize = 14; + + /// Line height multiplier for toolbar text. + /// + /// Vertical spacing factor applied to text elements in the + /// toolbar to ensure proper vertical alignment. + static const double toolbarTextHeight = 2; + + // ========== Coordinate Defaults ========== + + /// Default coordinate value for fallback scenarios. + /// + /// Used as a safe default when coordinate calculations fail + /// or when initializing coordinate values. + static const double defaultCoordinate = 0; } -/// Helper class for Fibonacci Fan drawing operations +/// Helper class for Fibonacci Fan drawing operations. +/// +/// This class provides static methods and constants for drawing Fibonacci Fan +/// technical analysis tools on charts. Fibonacci fans are used to identify +/// potential support and resistance levels based on Fibonacci ratios. +/// +/// The fan consists of multiple trend lines drawn from a base point, each +/// representing different Fibonacci retracement levels (0%, 38.2%, 50%, 61.8%, 100%). class FibonacciFanHelpers { - /// Validates that all coordinates in the given offsets are not NaN + /// Validates that all coordinates in the given offsets are not NaN. + /// + /// This method checks a list of [Offset] objects to ensure that both + /// their x and y coordinates are valid numbers (not NaN). This is + /// essential for preventing rendering errors when drawing operations + /// encounter invalid coordinate data. + /// + /// **Parameters:** + /// - [offsets]: List of coordinate points to validate + /// + /// **Returns:** + /// - `true` if all coordinates are valid (not NaN) + /// - `false` if any coordinate contains NaN values + /// + /// **Example:** + /// ```dart + /// final points = [Offset(10, 20), Offset(30, 40)]; + /// if (FibonacciFanHelpers.areCoordinatesValid(points)) { + /// // Safe to proceed with drawing operations + /// } + /// ``` static bool areCoordinatesValid(List offsets) { return offsets.every((offset) => !offset.dx.isNaN && !offset.dy.isNaN); } - /// Validates that a single offset has valid coordinates + /// Validates that a single offset has valid coordinates. + /// + /// Checks whether both x and y coordinates of an [Offset] are valid + /// numbers (not NaN). This is a fundamental validation used throughout + /// the drawing operations to prevent mathematical errors. + /// + /// **Parameters:** + /// - [offset]: The coordinate point to validate + /// + /// **Returns:** + /// - `true` if both x and y coordinates are valid numbers + /// - `false` if either coordinate is NaN + /// + /// **Example:** + /// ```dart + /// final point = Offset(mouseX, mouseY); + /// if (FibonacciFanHelpers.isOffsetValid(point)) { + /// // Safe to use this point for calculations + /// } + /// ``` static bool isOffsetValid(Offset offset) { return !offset.dx.isNaN && !offset.dy.isNaN; } - /// Validates that two offsets have valid coordinates + /// Validates that two offsets have valid coordinates. + /// + /// Convenience method that checks both offsets for coordinate validity. + /// This is commonly used when validating start and end points before + /// performing line drawing or geometric calculations. + /// + /// **Parameters:** + /// - [offset1]: First coordinate point to validate + /// - [offset2]: Second coordinate point to validate + /// + /// **Returns:** + /// - `true` if both offsets have valid coordinates + /// - `false` if either offset contains NaN values + /// + /// **Example:** + /// ```dart + /// if (FibonacciFanHelpers.areTwoOffsetsValid(startPoint, endPoint)) { + /// // Safe to draw line between these points + /// } + /// ``` static bool areTwoOffsetsValid(Offset offset1, Offset offset2) { return isOffsetValid(offset1) && isOffsetValid(offset2); } - /// Validates that deltas are meaningful (not too small) + /// Validates that coordinate deltas are meaningful (not too small). + /// + /// Determines whether the difference between two coordinates is large + /// enough to warrant drawing operations. Very small deltas can cause + /// visual artifacts or unnecessary computational overhead. + /// + /// **Parameters:** + /// - [deltaX]: Horizontal coordinate difference + /// - [deltaY]: Vertical coordinate difference + /// - [threshold]: Minimum meaningful difference (defaults to [FibfanConstants.defaultDeltaThreshold]) + /// + /// **Returns:** + /// - `true` if either delta exceeds the threshold + /// - `false` if both deltas are below the threshold + /// + /// **Example:** + /// ```dart + /// final deltaX = endPoint.dx - startPoint.dx; + /// final deltaY = endPoint.dy - startPoint.dy; + /// if (FibonacciFanHelpers.areDeltasMeaningful(deltaX, deltaY)) { + /// // Proceed with drawing the fan + /// } + /// ``` static bool areDeltasMeaningful(double deltaX, double deltaY, {double threshold = FibfanConstants.defaultDeltaThreshold}) { return deltaX.abs() > threshold || deltaY.abs() > threshold; } - /// Fibonacci levels with their ratios, labels, and color keys + /// Fibonacci levels with their ratios, labels, and color keys. + /// + /// This map defines the standard Fibonacci retracement levels used in + /// technical analysis. Each level contains: + /// - The mathematical ratio (key) + /// - A human-readable percentage label + /// - A color key for customizable styling + /// + /// **Fibonacci Levels:** + /// - **0.0**: 0% - The baseline level + /// - **0.382**: 38.2% - First major retracement level + /// - **0.5**: 50% - Midpoint retracement (not technically Fibonacci but commonly used) + /// - **0.618**: 61.8% - Golden ratio retracement level + /// - **1.0**: 100% - Full retracement level static final Map> fibonacciLevels = { 0.0: {'label': '0%', 'colorKey': 'level0'}, 0.382: {'label': '38.2%', 'colorKey': 'level38_2'}, @@ -79,10 +320,27 @@ class FibonacciFanHelpers { 1.0: {'label': '100%', 'colorKey': 'level100'}, }; - /// Fibonacci ratios for the fan lines in the desired order (reversed for proper visual ordering) + /// Fibonacci ratios for the fan lines in the desired visual order. + /// + /// Returns the Fibonacci ratios in reverse order (1.0 to 0.0) to ensure + /// proper visual layering when drawing the fan lines. This ordering + /// prevents visual overlap issues and ensures consistent rendering. + /// + /// **Visual Order (top to bottom):** + /// 1. 100% (1.0) - Steepest line + /// 2. 61.8% (0.618) - Golden ratio line + /// 3. 50% (0.5) - Midpoint line + /// 4. 38.2% (0.382) - First retracement line + /// 5. 0% (0.0) - Baseline (horizontal) static List get fibRatios => [1.0, 0.618, 0.5, 0.382, 0.0]; - /// Labels for each Fibonacci level in the desired order + /// Labels for each Fibonacci level in the desired visual order. + /// + /// Provides human-readable percentage labels corresponding to each + /// Fibonacci ratio. These labels are displayed next to their respective + /// fan lines to help users identify support and resistance levels. + /// + /// **Returns:** List of percentage strings in visual order static List get fibonacciLabels => [ fibonacciLevels[0.0]!['label']!, // 0% fibonacciLevels[0.382]!['label']!, // 38.2% @@ -91,7 +349,18 @@ class FibonacciFanHelpers { fibonacciLevels[1.0]!['label']!, // 100% ]; - /// Color keys for each Fibonacci level in the desired visual order + /// Color keys for each Fibonacci level in the desired visual order. + /// + /// Provides color mapping keys that can be used to apply custom colors + /// to individual Fibonacci levels. This allows for color-coded + /// visualization where different levels can have distinct appearances. + /// + /// **Color Keys:** + /// - `level0` - For 0% line + /// - `level38_2` - For 38.2% line + /// - `level50` - For 50% line + /// - `level61_8` - For 61.8% line + /// - `level100` - For 100% line static List get fibonacciColorKeys => [ fibonacciLevels[0.0]!['colorKey']!, // level0 for 0% fibonacciLevels[0.382]!['colorKey']!, // level38_2 for 38.2% @@ -100,7 +369,32 @@ class FibonacciFanHelpers { fibonacciLevels[1.0]!['colorKey']!, // level100 for 100% ]; - /// Draws the filled areas between fan lines + /// Draws the filled areas between fan lines. + /// + /// Creates alternating filled regions between adjacent Fibonacci fan lines + /// to provide visual distinction between different retracement levels. + /// The fill areas help users identify price zones more easily. + /// + /// **Algorithm:** + /// 1. Iterates through adjacent pairs of Fibonacci ratios + /// 2. Calculates fan points for each ratio + /// 3. Extends lines to screen edges (handling vertical lines) + /// 4. Creates triangular fill paths between adjacent lines + /// 5. Applies alternating opacity levels for visual distinction + /// + /// **Parameters:** + /// - [canvas]: The drawing canvas + /// - [startOffset]: Starting point of the fan in screen coordinates + /// - [deltaX]: Horizontal distance from start to end point + /// - [deltaY]: Vertical distance from start to end point + /// - [size]: Canvas size for boundary calculations + /// - [paintStyle]: Paint style configuration + /// - [fillStyle]: Fill style and color configuration + /// + /// **Visual Effect:** + /// - Even-indexed areas: 10% opacity + /// - Odd-indexed areas: 5% opacity + /// - Creates alternating light/lighter pattern static void drawFanFills( Canvas canvas, Offset startOffset, @@ -178,7 +472,36 @@ class FibonacciFanHelpers { } } - /// Draws the fan lines + /// Draws the fan lines representing Fibonacci retracement levels. + /// + /// Creates the main trend lines of the Fibonacci fan, each representing + /// a different retracement level. Lines extend from the start point to + /// the screen edge, with each line angled according to its Fibonacci ratio. + /// + /// **Algorithm:** + /// 1. Iterates through each Fibonacci ratio + /// 2. Calculates the fan point for each ratio + /// 3. Determines line color (custom or default) + /// 4. Extends line to screen edge (handling vertical lines) + /// 5. Draws the line with appropriate styling + /// + /// **Parameters:** + /// - [canvas]: The drawing canvas + /// - [startOffset]: Starting point of the fan in screen coordinates + /// - [deltaX]: Horizontal distance from start to end point + /// - [deltaY]: Vertical distance from start to end point + /// - [size]: Canvas size for boundary calculations + /// - [paintStyle]: Paint style configuration + /// - [lineStyle]: Default line style and color + /// - [fibonacciLevelColors]: Optional custom colors for each level + /// + /// **Line Extension:** + /// - Normal lines: Extended to right edge of screen using slope calculation + /// - Vertical lines: Extended to top/bottom edge to avoid division by zero + /// + /// **Color Mapping:** + /// - Uses custom colors from [fibonacciLevelColors] if provided + /// - Falls back to default [lineStyle.color] if no custom color exists static void drawFanLines( Canvas canvas, Offset startOffset, @@ -234,7 +557,40 @@ class FibonacciFanHelpers { } } - /// Draws labels for the fan lines + /// Draws labels for the fan lines showing Fibonacci percentages. + /// + /// Places percentage labels (0%, 38.2%, 50%, 61.8%, 100%) next to their + /// corresponding fan lines. Labels are rotated to align with their respective + /// lines and positioned slightly beyond the fan endpoint for clarity. + /// + /// **Algorithm:** + /// 1. Iterates through each Fibonacci ratio and its corresponding label + /// 2. Calculates the fan point for the current ratio + /// 3. Determines the line angle using arctangent + /// 4. Positions label beyond the fan endpoint using multiplier + /// 5. Applies canvas transformations (translate + rotate) + /// 6. Draws the rotated text with appropriate styling + /// 7. Restores canvas state for next label + /// + /// **Parameters:** + /// - [canvas]: The drawing canvas + /// - [startOffset]: Starting point of the fan in screen coordinates + /// - [deltaX]: Horizontal distance from start to end point + /// - [deltaY]: Vertical distance from start to end point + /// - [size]: Canvas size for boundary calculations + /// - [lineStyle]: Default line style for fallback color + /// - [fibonacciLabels]: List of percentage labels to display + /// - [fibonacciLevelColors]: Optional custom colors for each level + /// + /// **Label Positioning:** + /// - Position: 102% along each fan line from start point + /// - Rotation: Aligned with the angle of the corresponding fan line + /// - Offset: 5 pixels from the line to prevent overlap + /// - Font: 12px medium weight for readability + /// + /// **Color Mapping:** + /// - Uses custom colors from [fibonacciLevelColors] if provided + /// - Falls back to default [lineStyle.color] if no custom color exists static void drawFanLabels( Canvas canvas, Offset startOffset, From ddbc324ed51148e44babe1cc12e6a7c5dd7b692b Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 13:46:12 +0800 Subject: [PATCH 282/311] perf(fibfan): Implement paint object caching for improved rendering performance - Add four specialized cache maps for different paint object types: * _linePaintCache: Caches Paint objects for fan line drawing * _fillPaintCache: Caches Paint objects for fill area operations * _dashPaintCache: Caches Paint objects for mobile preview dashed lines * _textPainterCache: Caches TextPainter objects for Fibonacci level labels - Add getCachedLinePaint(): Returns reusable Paint objects for line drawing - Add getCachedFillPaint(): Returns reusable Paint objects for fill operations - Add getCachedDashPaint(): Returns reusable Paint objects for dashed lines - Add getCachedTextPainter(): Returns reusable TextPainter objects with pre-computed layouts - Add clearPaintCaches(): Memory cleanup method for cache invalidation - Add getCacheStats(): Performance monitoring and cache statistics - Update drawFanLines() to use getCachedLinePaint() instead of creating new Paint objects - Update drawFanLabels() to use getCachedTextPainter() instead of creating new TextPainter objects - Update mobile preview _drawPreviewFanLines() to use getCachedDashPaint() - Line paint: "line_${color.value}_${thickness}" - Fill paint: "fill_${color.value}_${thickness}" - Dash paint: "dash_${color.value}_${thickness}_${opacity}" - Text painter: "text_${text}_${color.value}_${fontSize}" - Eliminates Paint object allocation overhead during frequent drawing operations - Reduces TextPainter creation and layout computation for repeated labels - Improves animation smoothness by reusing cached objects - Optimizes mobile preview performance during user interactions - Reduces garbage collection pressure by reusing objects - Prevents memory leaks through controlled cache management - Provides memory cleanup capabilities for theme changes and tool deactivation - Smoother fan drawing animations and interactions - Faster real-time preview updates during creation - Improved mobile touch responsiveness and drag performance - Reduced frame drops during complex drawing operations - Maintains full backward compatibility with existing API - Adds comprehensive documentation with usage examples - Includes performance monitoring capabilities - Provides proper memory management and cleanup methods - Significant performance improvement for Fibonacci Fan rendering - Scalable caching system that can be extended to other drawing tools - Enhanced user experience across desktop and mobile platforms - Reduced computational overhead during animations and interactions Resolves: Performance optimization for Fibonacci Fan drawing operations --- .../fibfan/fibfan_adding_preview_mobile.dart | 10 +- .../interactable_drawings/fibfan/helpers.dart | 215 ++++++++++++++++-- 2 files changed, 203 insertions(+), 22 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index e4503bc0f..5c3f4a804 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -238,11 +238,11 @@ class FibfanAddingPreviewMobile double deltaY, Size size, ) { - final Paint dashPaint = Paint() - ..color = interactableDrawing.config.lineStyle.color - .withOpacity(FibfanConstants.dashOpacity) - ..style = PaintingStyle.stroke - ..strokeWidth = interactableDrawing.config.lineStyle.thickness; + final Paint dashPaint = FibonacciFanHelpers.getCachedDashPaint( + interactableDrawing.config.lineStyle.color, + interactableDrawing.config.lineStyle.thickness, + FibfanConstants.dashOpacity, + ); for (final double ratio in FibonacciFanHelpers.fibRatios) { final Offset fanPoint = Offset( diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index 8022a0544..66e4f1ef0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -196,7 +196,198 @@ class FibfanConstants { /// /// The fan consists of multiple trend lines drawn from a base point, each /// representing different Fibonacci retracement levels (0%, 38.2%, 50%, 61.8%, 100%). +/// +/// **Performance Optimization:** +/// This class implements paint object caching to improve rendering performance +/// by reusing Paint objects instead of creating new ones for each draw operation. class FibonacciFanHelpers { + /// Cache for line paint objects to improve performance. + /// + /// Maps paint configuration keys to reusable Paint objects. This prevents + /// the overhead of creating new Paint objects for each drawing operation, + /// which can significantly improve performance during animations and + /// frequent redraws. + /// + /// **Cache Key Format:** `"line_${color.value}_${thickness}"` + static final Map _linePaintCache = {}; + + /// Cache for fill paint objects to improve performance. + /// + /// Maps paint configuration keys to reusable Paint objects for fill operations. + /// This is particularly beneficial for drawing the filled areas between + /// fan lines, which can involve multiple fill operations per frame. + /// + /// **Cache Key Format:** `"fill_${color.value}_${thickness}"` + static final Map _fillPaintCache = {}; + + /// Cache for dash paint objects to improve performance. + /// + /// Maps paint configuration keys to reusable Paint objects for dashed lines. + /// Used primarily in mobile preview mode where dashed lines are drawn + /// frequently during user interactions. + /// + /// **Cache Key Format:** `"dash_${color.value}_${thickness}_${opacity}"` + static final Map _dashPaintCache = {}; + + /// Cache for text painter objects to improve label rendering performance. + /// + /// Maps text configuration keys to reusable TextPainter objects. This is + /// especially beneficial for Fibonacci level labels which are drawn + /// repeatedly with the same styling. + /// + /// **Cache Key Format:** `"text_${text}_${color.value}_${fontSize}"` + static final Map _textPainterCache = + {}; + + /// Gets or creates a cached line paint object. + /// + /// Returns a reusable Paint object configured for line drawing. If a paint + /// object with the same configuration already exists in the cache, it is + /// returned. Otherwise, a new one is created, cached, and returned. + /// + /// **Parameters:** + /// - [color]: Line color + /// - [thickness]: Line thickness + /// + /// **Returns:** Cached or newly created Paint object for line drawing + /// + /// **Performance Benefit:** Eliminates Paint object allocation overhead + /// during frequent drawing operations, especially during animations. + static Paint getCachedLinePaint(Color color, double thickness) { + final String key = 'line_${color.value}_$thickness'; + return _linePaintCache.putIfAbsent( + key, + () => Paint() + ..color = color + ..style = PaintingStyle.stroke + ..strokeWidth = thickness); + } + + /// Gets or creates a cached fill paint object. + /// + /// Returns a reusable Paint object configured for fill operations. This is + /// particularly useful for drawing the filled areas between fan lines. + /// + /// **Parameters:** + /// - [color]: Fill color + /// - [thickness]: Stroke thickness (for fill border if applicable) + /// + /// **Returns:** Cached or newly created Paint object for fill operations + /// + /// **Performance Benefit:** Reduces memory allocation during fill operations, + /// which can be frequent when drawing multiple fan fill areas. + static Paint getCachedFillPaint(Color color, double thickness) { + final String key = 'fill_${color.value}_$thickness'; + return _fillPaintCache.putIfAbsent( + key, + () => Paint() + ..color = color + ..style = PaintingStyle.fill + ..strokeWidth = thickness); + } + + /// Gets or creates a cached dash paint object. + /// + /// Returns a reusable Paint object configured for dashed line drawing. + /// Used primarily in mobile preview mode for drawing dashed fan lines. + /// + /// **Parameters:** + /// - [color]: Dash line color + /// - [thickness]: Dash line thickness + /// - [opacity]: Dash line opacity (0.0 to 1.0) + /// + /// **Returns:** Cached or newly created Paint object for dashed lines + /// + /// **Performance Benefit:** Optimizes mobile preview performance where + /// dashed lines are drawn frequently during user interactions. + static Paint getCachedDashPaint( + Color color, double thickness, double opacity) { + final String key = 'dash_${color.value}_${thickness}_$opacity'; + return _dashPaintCache.putIfAbsent( + key, + () => Paint() + ..color = color.withOpacity(opacity) + ..style = PaintingStyle.stroke + ..strokeWidth = thickness); + } + + /// Gets or creates a cached text painter object. + /// + /// Returns a reusable TextPainter object configured for text rendering. + /// This is especially beneficial for Fibonacci level labels which use + /// consistent styling and are drawn repeatedly. + /// + /// **Parameters:** + /// - [text]: Text content to render + /// - [color]: Text color + /// - [fontSize]: Text font size + /// + /// **Returns:** Cached or newly created TextPainter object + /// + /// **Performance Benefit:** Eliminates TextPainter creation and layout + /// overhead for repeated label rendering, significantly improving + /// performance during animations and frequent redraws. + static TextPainter getCachedTextPainter( + String text, Color color, double fontSize) { + final String key = 'text_${text}_${color.value}_$fontSize'; + return _textPainterCache.putIfAbsent(key, () { + final textPainter = TextPainter( + text: TextSpan( + text: text, + style: TextStyle( + color: color, + fontSize: fontSize, + fontWeight: FontWeight.w500, + ), + ), + textDirection: TextDirection.ltr, + )..layout(); + return textPainter; + }); + } + + /// Clears all paint and text painter caches. + /// + /// This method should be called when memory optimization is needed or + /// when the drawing configuration has changed significantly. It's + /// recommended to call this during major theme changes or when the + /// drawing tool is no longer in use. + /// + /// **Use Cases:** + /// - Memory cleanup during app lifecycle events + /// - Theme changes that invalidate cached paint objects + /// - Drawing tool deactivation + /// + /// **Performance Note:** After clearing caches, the next drawing operations + /// will recreate paint objects, so avoid calling this during active drawing. + static void clearPaintCaches() { + _linePaintCache.clear(); + _fillPaintCache.clear(); + _dashPaintCache.clear(); + _textPainterCache.clear(); + } + + /// Gets cache statistics for performance monitoring. + /// + /// Returns information about the current state of all paint caches. + /// This can be useful for performance monitoring and optimization. + /// + /// **Returns:** Map containing cache sizes and memory usage information + /// + /// **Example:** + /// ```dart + /// final stats = FibonacciFanHelpers.getCacheStats(); + /// print('Line paint cache size: ${stats['linePaintCacheSize']}'); + /// ``` + static Map getCacheStats() { + return { + 'linePaintCacheSize': _linePaintCache.length, + 'fillPaintCacheSize': _fillPaintCache.length, + 'dashPaintCacheSize': _dashPaintCache.length, + 'textPainterCacheSize': _textPainterCache.length, + }; + } + /// Validates that all coordinates in the given offsets are not NaN. /// /// This method checks a list of [Offset] objects to ensure that both @@ -520,10 +711,8 @@ class FibonacciFanHelpers { ? fibonacciLevelColors[colorKey]! : lineStyle.color; - final Paint linePaint = paintStyle.linePaintStyle( - lineColor, - lineStyle.thickness, - ); + final Paint linePaint = + getCachedLinePaint(lineColor, lineStyle.thickness); final Offset fanPoint = Offset( startOffset.dx + deltaX, @@ -635,25 +824,17 @@ class FibonacciFanHelpers { ? fibonacciLevelColors[colorKey]! : lineStyle.color; - final TextPainter textPainter = TextPainter( - text: TextSpan( - text: label, - style: TextStyle( - color: labelColor, - fontSize: FibfanConstants.labelFontSize, - fontWeight: FontWeight.w500, - ), - ), - textDirection: TextDirection.ltr, - )..layout(); + final TextPainter textPainter = getCachedTextPainter( + label, + labelColor, + FibfanConstants.labelFontSize, + ); // Save the current canvas state canvas ..save() - // Translate to the label position ..translate(labelPosition.dx, labelPosition.dy) - // Rotate the canvas by the line angle ..rotate(lineAngle); From c5fb6a0ac1d212f978e5bf65310c263178790598 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 14:17:49 +0800 Subject: [PATCH 283/311] feat(showcase): Add expandable controls to all chart example screens - Implement expandable/collapsible controls functionality in BaseChartScreen - Add animated toggle button in app bar with expand_more/expand_less icons - Introduce smooth 300ms animations using AnimatedContainer and AnimatedOpacity - Set fixed 300px height constraint to prevent RenderFlex overflow errors - Wrap controls in SingleChildScrollView for content exceeding container height - Add tooltips for better accessibility ("Hide Controls"/"Show Controls") Updated screens: - barriers_screen.dart - candle_chart_screen.dart - candle_chart_with_indicator_screen.dart - drawing_tools_screen.dart - hollow_candle_screen.dart - hollow_candle_with_indicator_screen.dart - indicators_screen.dart - line_chart_screen.dart - line_chart_with_indicator_screen.dart - markers_screen.dart - ohlc_chart_screen.dart - ohlc_chart_with_indicator_screen.dart - theme_customization_screen.dart Benefits: - Maximizes chart viewing space when controls are collapsed - Consistent UX across all chart example screens - Eliminates overflow rendering issues - Provides smooth, polished user experience Fixes: RenderFlex overflow errors in chart controls sections --- .../chart_examples/base_chart_screen.dart | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/showcase_app/lib/screens/chart_examples/base_chart_screen.dart b/showcase_app/lib/screens/chart_examples/base_chart_screen.dart index 26c2c2a9f..a3eebf253 100644 --- a/showcase_app/lib/screens/chart_examples/base_chart_screen.dart +++ b/showcase_app/lib/screens/chart_examples/base_chart_screen.dart @@ -20,6 +20,9 @@ abstract class BaseChartScreenState /// The chart candles. late List candles; + /// Whether the controls section is expanded. + bool _isControlsExpanded = true; + @override void initState() { super.initState(); @@ -36,13 +39,39 @@ abstract class BaseChartScreenState appBar: AppBar( title: Text(getTitle()), centerTitle: true, + actions: [ + IconButton( + icon: Icon( + _isControlsExpanded ? Icons.expand_less : Icons.expand_more, + ), + onPressed: () { + setState(() { + _isControlsExpanded = !_isControlsExpanded; + }); + }, + tooltip: _isControlsExpanded ? 'Hide Controls' : 'Show Controls', + ), + ], ), body: Column( children: [ Expanded( child: buildChart(), ), - buildControls(), + AnimatedContainer( + duration: const Duration(milliseconds: 300), + curve: Curves.easeInOut, + height: _isControlsExpanded ? 300 : 0, + child: AnimatedOpacity( + duration: const Duration(milliseconds: 300), + opacity: _isControlsExpanded ? 1.0 : 0.0, + child: _isControlsExpanded + ? SingleChildScrollView( + child: buildControls(), + ) + : const SizedBox.shrink(), + ), + ), ], ), ); From d925d0a17c6fb924f1ce027c4a254bf797544362 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 14:45:04 +0800 Subject: [PATCH 284/311] chore: remove unnecessary comment --- .../interactive_layer/interactable_drawings/fibfan/helpers.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index 66e4f1ef0..71dc8ed8b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -790,7 +790,6 @@ class FibonacciFanHelpers { required List fibonacciLabels, Map? fibonacciLevelColors, }) { - // final List labelsToUse = fibonacciLabels; for (int i = 0; i < FibonacciFanHelpers.fibRatios.length; i++) { final double ratio = FibonacciFanHelpers.fibRatios[i]; From 1118efc370f3f1ff482ca67f843705ffc0148f05 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 16:08:55 +0800 Subject: [PATCH 285/311] feat: implement angle-based Fibonacci fan calculations Replace ratio-based Y-coordinate multipliers with proper angle-based calculations for Fibonacci fan lines. This ensures percentages represent angle relationships rather than direct coordinate multipliers, providing mathematically correct Fibonacci fan behavior. Changes: - Update drawFanLines() to use baseAngle * ratio calculations - Modify drawFanFills() to use trigonometric line extensions - Adjust drawFanLabels() for angle-based label positioning - Update hit testing logic to work with new angle calculations - Add math import for trigonometric functions The new approach calculates each fan line as a percentage of the base angle (atan2(deltaY, deltaX)), where: - 0%: Horizontal line (0 degrees) - 38.2%: 38.2% of base angle - 50%: 50% of base angle - 61.8%: 61.8% of base angle - 100%: Full base angle This aligns with standard technical analysis Fibonacci fan behavior and provides more intuitive visual fan spreading. --- .../fibfan/fibfan_interactable_drawing.dart | 22 +-- .../interactable_drawings/fibfan/helpers.dart | 165 +++++++----------- 2 files changed, 78 insertions(+), 109 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index be5de8440..881da3306 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -1,3 +1,4 @@ +import 'dart:math' as math; import 'dart:ui' as ui; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/callbacks.dart'; import 'package:deriv_chart/src/add_ons/drawing_tools_ui/drawing_tool_config.dart'; @@ -199,7 +200,7 @@ class FibfanInteractableDrawing return _hitTestFanLines(offset, epochToX, quoteToY); } - /// Helper method to test if a point hits any of the fan lines + /// Helper method to test if a point hits any of the fan lines using angle-based calculations bool _hitTestFanLines(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { if (startPoint == null || endPoint == null) { return false; @@ -214,24 +215,23 @@ class FibfanInteractableDrawing quoteToY(endPoint!.quote), ); - // Calculate the base vector + // Calculate the base vector and angle final double deltaX = endOffset.dx - startOffset.dx; final double deltaY = endOffset.dy - startOffset.dy; + final double baseAngle = math.atan2(deltaY, deltaX); - // Check each fan line + // Check each fan line using angle-based calculations for (final double ratio in FibonacciFanHelpers.fibRatios) { - final Offset fanEndPoint = Offset( - startOffset.dx + deltaX, - startOffset.dy + deltaY * ratio, - ); + // Calculate angle as a percentage of the base angle + final double fanAngle = baseAngle * ratio; - // Extend the line to the edge of the screen + // Extend the line to the edge of the screen using trigonometry final double screenWidth = drawingContext.contentSize.width; - final double lineSlope = - (fanEndPoint.dy - startOffset.dy) / (fanEndPoint.dx - startOffset.dx); + final double distanceToEdge = screenWidth - startOffset.dx; + final Offset extendedEndPoint = Offset( screenWidth, - startOffset.dy + lineSlope * (screenWidth - startOffset.dx), + startOffset.dy + distanceToEdge * math.tan(fanAngle), ); // Calculate perpendicular distance from point to line diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index 71dc8ed8b..b2d28c77f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -560,16 +560,16 @@ class FibonacciFanHelpers { fibonacciLevels[1.0]!['colorKey']!, // level100 for 100% ]; - /// Draws the filled areas between fan lines. + /// Draws the filled areas between fan lines using angle-based calculations. /// /// Creates alternating filled regions between adjacent Fibonacci fan lines /// to provide visual distinction between different retracement levels. /// The fill areas help users identify price zones more easily. /// /// **Algorithm:** - /// 1. Iterates through adjacent pairs of Fibonacci ratios - /// 2. Calculates fan points for each ratio - /// 3. Extends lines to screen edges (handling vertical lines) + /// 1. Calculates the base angle from start to end point + /// 2. For each Fibonacci ratio, calculates the angle as a percentage of the base angle + /// 3. Extends lines to screen edges using trigonometric calculations /// 4. Creates triangular fill paths between adjacent lines /// 5. Applies alternating opacity levels for visual distinction /// @@ -595,49 +595,30 @@ class FibonacciFanHelpers { DrawingPaintStyle paintStyle, LineStyle fillStyle, ) { + // Calculate the base angle from start to end point + final double baseAngle = math.atan2(deltaY, deltaX); + for (int i = 0; i < fibRatios.length - 1; i++) { final double ratio1 = fibRatios[i]; final double ratio2 = fibRatios[i + 1]; - final Offset fanPoint1 = Offset( - startOffset.dx + deltaX, - startOffset.dy + deltaY * ratio1, - ); - final Offset fanPoint2 = Offset( - startOffset.dx + deltaX, - startOffset.dy + deltaY * ratio2, - ); + // Calculate angles as percentages of the base angle + final double angle1 = baseAngle * ratio1; + final double angle2 = baseAngle * ratio2; - // Extend lines to the edge of the screen + // Extend lines to the edge of the screen using angle-based calculations final double screenWidth = size.width; - final double deltaXFan = fanPoint1.dx - startOffset.dx; - - // Handle vertical lines and avoid division by zero - Offset extendedPoint1, extendedPoint2; - - if (deltaXFan.abs() < FibfanConstants.verticalLineThreshold) { - // Vertical lines - extend to top or bottom of screen - extendedPoint1 = Offset( - fanPoint1.dx, - fanPoint1.dy > startOffset.dy ? size.height : 0, - ); - extendedPoint2 = Offset( - fanPoint2.dx, - fanPoint2.dy > startOffset.dy ? size.height : 0, - ); - } else { - final double slope1 = (fanPoint1.dy - startOffset.dy) / deltaXFan; - final double slope2 = (fanPoint2.dy - startOffset.dy) / deltaXFan; + final double distanceToEdge = screenWidth - startOffset.dx; - extendedPoint1 = Offset( - screenWidth, - startOffset.dy + slope1 * (screenWidth - startOffset.dx), - ); - extendedPoint2 = Offset( - screenWidth, - startOffset.dy + slope2 * (screenWidth - startOffset.dx), - ); - } + // Calculate extended points using trigonometry + final Offset extendedPoint1 = Offset( + screenWidth, + startOffset.dy + distanceToEdge * math.tan(angle1), + ); + final Offset extendedPoint2 = Offset( + screenWidth, + startOffset.dy + distanceToEdge * math.tan(angle2), + ); // Validate coordinates before creating path if (areCoordinatesValid([startOffset, extendedPoint1, extendedPoint2])) { @@ -663,17 +644,18 @@ class FibonacciFanHelpers { } } - /// Draws the fan lines representing Fibonacci retracement levels. + /// Draws the fan lines representing Fibonacci retracement levels using angle-based calculations. /// /// Creates the main trend lines of the Fibonacci fan, each representing /// a different retracement level. Lines extend from the start point to - /// the screen edge, with each line angled according to its Fibonacci ratio. + /// the screen edge, with each line angled according to its Fibonacci ratio + /// as a percentage of the base angle. /// /// **Algorithm:** - /// 1. Iterates through each Fibonacci ratio - /// 2. Calculates the fan point for each ratio + /// 1. Calculates the base angle from start to end point + /// 2. For each Fibonacci ratio, calculates the angle as a percentage of the base angle /// 3. Determines line color (custom or default) - /// 4. Extends line to screen edge (handling vertical lines) + /// 4. Extends line to screen edge using trigonometric calculations /// 5. Draws the line with appropriate styling /// /// **Parameters:** @@ -686,9 +668,12 @@ class FibonacciFanHelpers { /// - [lineStyle]: Default line style and color /// - [fibonacciLevelColors]: Optional custom colors for each level /// - /// **Line Extension:** - /// - Normal lines: Extended to right edge of screen using slope calculation - /// - Vertical lines: Extended to top/bottom edge to avoid division by zero + /// **Angle-Based Approach:** + /// - 0%: Horizontal line (0 degrees) + /// - 38.2%: 38.2% of the base angle + /// - 50%: 50% of the base angle + /// - 61.8%: 61.8% of the base angle + /// - 100%: Full base angle (same as original trend line) /// /// **Color Mapping:** /// - Uses custom colors from [fibonacciLevelColors] if provided @@ -703,6 +688,9 @@ class FibonacciFanHelpers { LineStyle lineStyle, { Map? fibonacciLevelColors, }) { + // Calculate the base angle from start to end point + final double baseAngle = math.atan2(deltaY, deltaX); + for (int i = 0; i < fibRatios.length; i++) { final double ratio = fibRatios[i]; final String colorKey = fibonacciColorKeys[i]; @@ -714,30 +702,18 @@ class FibonacciFanHelpers { final Paint linePaint = getCachedLinePaint(lineColor, lineStyle.thickness); - final Offset fanPoint = Offset( - startOffset.dx + deltaX, - startOffset.dy + deltaY * ratio, - ); + // Calculate angle as a percentage of the base angle + final double fanAngle = baseAngle * ratio; - // Extend line to the edge of the screen + // Extend line to the edge of the screen using angle-based calculations final double screenWidth = size.width; - final double deltaXFan = fanPoint.dx - startOffset.dx; - - // Handle vertical lines and avoid division by zero - Offset extendedPoint; - if (deltaXFan.abs() < FibfanConstants.verticalLineThreshold) { - // Vertical line - extend to top or bottom of screen - extendedPoint = Offset( - fanPoint.dx, - fanPoint.dy > startOffset.dy ? size.height : 0, - ); - } else { - final double slope = (fanPoint.dy - startOffset.dy) / deltaXFan; - extendedPoint = Offset( - screenWidth, - startOffset.dy + slope * (screenWidth - startOffset.dx), - ); - } + final double distanceToEdge = screenWidth - startOffset.dx; + + // Calculate extended point using trigonometry + final Offset extendedPoint = Offset( + screenWidth, + startOffset.dy + distanceToEdge * math.tan(fanAngle), + ); // Validate coordinates before drawing if (areTwoOffsetsValid(startOffset, extendedPoint)) { @@ -746,20 +722,19 @@ class FibonacciFanHelpers { } } - /// Draws labels for the fan lines showing Fibonacci percentages. + /// Draws labels for the fan lines showing Fibonacci percentages using angle-based calculations. /// /// Places percentage labels (0%, 38.2%, 50%, 61.8%, 100%) next to their /// corresponding fan lines. Labels are rotated to align with their respective /// lines and positioned slightly beyond the fan endpoint for clarity. /// /// **Algorithm:** - /// 1. Iterates through each Fibonacci ratio and its corresponding label - /// 2. Calculates the fan point for the current ratio - /// 3. Determines the line angle using arctangent - /// 4. Positions label beyond the fan endpoint using multiplier - /// 5. Applies canvas transformations (translate + rotate) - /// 6. Draws the rotated text with appropriate styling - /// 7. Restores canvas state for next label + /// 1. Calculates the base angle from start to end point + /// 2. For each Fibonacci ratio, calculates the angle as a percentage of the base angle + /// 3. Positions label along the calculated angle + /// 4. Applies canvas transformations (translate + rotate) + /// 5. Draws the rotated text with appropriate styling + /// 6. Restores canvas state for next label /// /// **Parameters:** /// - [canvas]: The drawing canvas @@ -772,7 +747,7 @@ class FibonacciFanHelpers { /// - [fibonacciLevelColors]: Optional custom colors for each level /// /// **Label Positioning:** - /// - Position: 102% along each fan line from start point + /// - Position: Along each fan line at a fixed distance from start point /// - Rotation: Aligned with the angle of the corresponding fan line /// - Offset: 5 pixels from the line to prevent overlap /// - Font: 12px medium weight for readability @@ -790,30 +765,24 @@ class FibonacciFanHelpers { required List fibonacciLabels, Map? fibonacciLevelColors, }) { + // Calculate the base angle from start to end point + final double baseAngle = math.atan2(deltaY, deltaX); + + // Calculate a fixed distance for label positioning + final double labelDistance = math.sqrt(deltaX * deltaX + deltaY * deltaY) * + FibfanConstants.labelPositionMultiplier; for (int i = 0; i < FibonacciFanHelpers.fibRatios.length; i++) { final double ratio = FibonacciFanHelpers.fibRatios[i]; final String label = i < fibonacciLabels.length ? fibonacciLabels[i] : ''; - final Offset fanPoint = Offset( - startOffset.dx + deltaX, - startOffset.dy + deltaY * ratio, - ); - - // Calculate the angle of the fan line - final double lineAngle = math.atan2( - fanPoint.dy - startOffset.dy, - fanPoint.dx - startOffset.dx, - ); + // Calculate angle as a percentage of the base angle + final double fanAngle = baseAngle * ratio; - // Calculate label position along the line + // Calculate label position along the fan line final Offset labelPosition = Offset( - startOffset.dx + - (fanPoint.dx - startOffset.dx) * - FibfanConstants.labelPositionMultiplier, - startOffset.dy + - (fanPoint.dy - startOffset.dy) * - FibfanConstants.labelPositionMultiplier, + startOffset.dx + labelDistance * math.cos(fanAngle), + startOffset.dy + labelDistance * math.sin(fanAngle), ); // Use custom color if provided, otherwise use default line style color @@ -834,8 +803,8 @@ class FibonacciFanHelpers { ..save() // Translate to the label position ..translate(labelPosition.dx, labelPosition.dy) - // Rotate the canvas by the line angle - ..rotate(lineAngle); + // Rotate the canvas by the fan angle + ..rotate(fanAngle); // Adjust text position to left-align it when rotated final Offset textOffset = Offset( From 1963b9f4e352b20a9f578dd42b23af6738f05459 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 17:00:00 +0800 Subject: [PATCH 286/311] fix(fibfan): only the edgePoint being dragged should glow - Add call to the drawFocusedCircle function to paint a circle for the edgePoint that is being dragged - Add call to the drawPoint function to paint unfocused circle for the edgePoint that isn't being dragged Fixes issue where both edgePoints were being painted as glowy, even when only one of them was being dragged --- .../fibfan/fibfan_interactable_drawing.dart | 45 ++++++++++++++----- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 881da3306..07caa281e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -313,17 +313,40 @@ class FibfanInteractableDrawing // Draw endpoints with glowy effect if selected if (drawingState.contains(DrawingToolState.selected) || drawingState.contains(DrawingToolState.dragging)) { - drawPointsFocusedCircle( - paintStyle, - lineStyle, - canvas, - startOffset, - FibfanConstants.focusedCircleRadius * - animationInfo.stateChangePercent, - FibfanConstants.focusedCircleStroke * - animationInfo.stateChangePercent, - endOffset, - ); + if (drawingState.contains(DrawingToolState.dragging) && + isDraggingStartPoint != null) { + drawFocusedCircle( + paintStyle, + lineStyle, + canvas, + isDraggingStartPoint == true ? startOffset : endOffset, + FibfanConstants.focusedCircleRadius * + animationInfo.stateChangePercent, + FibfanConstants.focusedCircleStroke * + animationInfo.stateChangePercent, + ); + drawPoint( + isDraggingStartPoint == true ? endPoint! : startPoint!, + epochToX, + quoteToY, + canvas, + paintStyle, + config.lineStyle, + radius: FibfanConstants.pointRadius, + ); + } else { + drawPointsFocusedCircle( + paintStyle, + lineStyle, + canvas, + startOffset, + FibfanConstants.focusedCircleRadius * + animationInfo.stateChangePercent, + FibfanConstants.focusedCircleStroke * + animationInfo.stateChangePercent, + endOffset, + ); + } } else if (drawingState.contains(DrawingToolState.hovered)) { drawPointsFocusedCircle( paintStyle, From 7afb70a27cb24350120277296bbbe4399c00b5d5 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 26 Jun 2025 17:04:51 +0800 Subject: [PATCH 287/311] docs(fibfan): add documentation for edge point visual feedback logic - Document differentiated visual feedback during individual point dragging - Explain drawFocusedCircle usage for actively dragged points - Explain drawPoint usage for stationary points during drag operations - Add comments describing fallback behavior for general selection states - Clarify UX rationale behind visual distinction between dragged and stationary points Improves code maintainability and helps future developers understand the visual feedback system for Fibonacci Fan edge point interactions. --- .../fibfan/fibfan_interactable_drawing.dart | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 07caa281e..2c358024e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -310,11 +310,14 @@ class FibfanInteractableDrawing fibonacciLevelColors: config.fibonacciLevelColors); } - // Draw endpoints with glowy effect if selected + // Draw endpoints with appropriate visual feedback based on interaction state if (drawingState.contains(DrawingToolState.selected) || drawingState.contains(DrawingToolState.dragging)) { + // Handle individual point dragging with differentiated visual feedback if (drawingState.contains(DrawingToolState.dragging) && isDraggingStartPoint != null) { + // Draw focused circle (glowing effect) only on the point being dragged + // This provides clear visual feedback about which point is actively being manipulated drawFocusedCircle( paintStyle, lineStyle, @@ -325,6 +328,10 @@ class FibfanInteractableDrawing FibfanConstants.focusedCircleStroke * animationInfo.stateChangePercent, ); + + // Draw regular point (non-glowing) on the point that is NOT being dragged + // This maintains visibility of the stationary point while clearly distinguishing + // it from the actively dragged point drawPoint( isDraggingStartPoint == true ? endPoint! : startPoint!, epochToX, @@ -335,6 +342,8 @@ class FibfanInteractableDrawing radius: FibfanConstants.pointRadius, ); } else { + // When not dragging individual points (selected state or dragging entire fan), + // show focused circles on both points for general selection feedback drawPointsFocusedCircle( paintStyle, lineStyle, From 6073dc2fc1b76a634ceda3060859fa804871f580 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Mon, 30 Jun 2025 14:20:07 +0800 Subject: [PATCH 288/311] feat(fibfan): enhance control point visibility and remove mobile glow effect - Add preview point rendering at hover position in desktop mode - Remove glow effect from mobile preview points for cleaner appearance - Draw control points during preview phase for improved user feedback - Enhance visual feedback with proper point radius constants - Improve alignment guides positioning for end points The changes improve the user experience when creating Fibonacci Fan drawings by making control points more visible during the creation process on desktop while providing a cleaner, non-glowing point display on mobile platforms. --- .../fibfan/fibfan_adding_preview_desktop.dart | 41 ++++++++++++++++++- .../fibfan/fibfan_adding_preview_mobile.dart | 27 ++++++------ .../fibfan/fibfan_interactable_drawing.dart | 28 +++++++++++++ 3 files changed, 81 insertions(+), 15 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index b7f76120e..24b1a1435 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -100,6 +100,7 @@ class FibfanAddingPreviewDesktop final LineStyle lineStyle = interactableDrawing.config.lineStyle; final LineStyle fillStyle = interactableDrawing.config.fillStyle; final DrawingPaintStyle paintStyle = DrawingPaintStyle(); + if (interactableDrawing.startPoint == null && _hoverPosition != null) { final Offset pointOffset = Offset( _hoverPosition!.dx, @@ -107,7 +108,19 @@ class FibfanAddingPreviewDesktop ); drawPointAlignmentGuides(canvas, size, pointOffset, lineColor: interactableDrawing.config.lineStyle.color); + + // Draw preview point at hover position + drawPointOffset( + pointOffset, + epochToX, + quoteToY, + canvas, + paintStyle, + interactableDrawing.config.lineStyle, + radius: FibfanConstants.pointRadius, + ); } + if (interactableDrawing.startPoint != null && _hoverPosition != null) { // Draw preview fan from start point to hover position final Offset startOffset = Offset( @@ -141,11 +154,35 @@ class FibfanAddingPreviewDesktop fibonacciLabels: FibonacciFanHelpers.fibonacciLabels, fibonacciLevelColors: interactableDrawing.config.fibonacciLevelColors); - final Offset pointOffset = Offset( + + // Draw the control points + // Draw start point (already placed) + drawPointOffset( + startOffset, + epochToX, + quoteToY, + canvas, + paintStyle, + interactableDrawing.config.lineStyle, + radius: FibfanConstants.pointRadius, + ); + + // Draw end point at hover position (preview) + final Offset endPointOffset = Offset( _hoverPosition!.dx, _hoverPosition!.dy, ); - drawPointAlignmentGuides(canvas, size, pointOffset, + drawPointOffset( + endPointOffset, + epochToX, + quoteToY, + canvas, + paintStyle, + interactableDrawing.config.lineStyle, + radius: FibfanConstants.pointRadius, + ); + + drawPointAlignmentGuides(canvas, size, endPointOffset, lineColor: interactableDrawing.config.lineStyle.color); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 5c3f4a804..2c0d09d4b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -191,25 +191,26 @@ class FibfanAddingPreviewMobile _drawPreviewFanLines(canvas, startOffset, deltaX, deltaY, size); } - // Draw edge points for the preview + // Draw edge points for the preview with enhanced visibility final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - drawPointOffset( - startOffset, - epochToX, - quoteToY, - canvas, + + // Draw focused circles around the points to make them more visible during creation + drawFocusedCircle( paintStyle, interactableDrawing.config.lineStyle, - radius: FibfanConstants.pointRadius, - ); - drawPointOffset( - endOffset, - epochToX, - quoteToY, canvas, + startOffset, + FibfanConstants.focusedCircleRadius, + FibfanConstants.pointRadius, + ); + + drawFocusedCircle( paintStyle, interactableDrawing.config.lineStyle, - radius: FibfanConstants.pointRadius, + canvas, + endOffset, + FibfanConstants.focusedCircleRadius, + FibfanConstants.pointRadius, ); // Draw alignment guides on each edge point when dragging diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 2c358024e..61099ea6e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -396,6 +396,34 @@ class FibfanInteractableDrawing FibonacciFanHelpers.drawFanLines( canvas, startOffset, deltaX, deltaY, size, paintStyle, lineStyle); + + // Draw the control points during preview + // Draw start point (already placed) + drawPoint( + startPoint!, + epochToX, + quoteToY, + canvas, + paintStyle, + config.lineStyle, + radius: FibfanConstants.pointRadius, + ); + + // Draw preview end point at hover position + final Offset hoverPointOffset = Offset( + _hoverPosition!.dx, + _hoverPosition!.dy, + ); + drawPointOffset( + hoverPointOffset, + epochToX, + quoteToY, + canvas, + paintStyle, + config.lineStyle, + radius: FibfanConstants.pointRadius, + ); + drawPointAlignmentGuides(canvas, size, startOffset, lineColor: config.lineStyle.color); } From 1fca11cb216c2199913a99304579556b01caf251 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Mon, 30 Jun 2025 17:34:11 +0800 Subject: [PATCH 289/311] fix(fibfan): reverse fan angle mapping and fix hit testing consistency - Change 0% to point to end point, 100% to be horizontal line - Fix inconsistency between hit testing and drawing angle calculations - Update all drawing methods (lines, fills, labels) to use consistent interpolation - Ensure hit testing matches visual appearance for all fan orientations The fan now correctly interpolates from the end angle (0%) to horizontal (100%), resolving visual ordering issues when baseAngle is negative (downward direction). --- .../fibfan/fibfan_adding_preview_desktop.dart | 1 - .../fibfan/fibfan_adding_preview_mobile.dart | 31 ++- .../fibfan/fibfan_interactable_drawing.dart | 10 +- .../interactable_drawings/fibfan/helpers.dart | 236 +++++++++++------- 4 files changed, 163 insertions(+), 115 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index 24b1a1435..a32e45119 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -151,7 +151,6 @@ class FibfanAddingPreviewDesktop // Draw labels for the fan lines FibonacciFanHelpers.drawFanLabels( canvas, startOffset, deltaX, deltaY, size, lineStyle, - fibonacciLabels: FibonacciFanHelpers.fibonacciLabels, fibonacciLevelColors: interactableDrawing.config.fibonacciLevelColors); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 2c0d09d4b..2c0d3a65f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -191,26 +191,25 @@ class FibfanAddingPreviewMobile _drawPreviewFanLines(canvas, startOffset, deltaX, deltaY, size); } - // Draw edge points for the preview with enhanced visibility + // Draw edge points for the preview final DrawingPaintStyle paintStyle = DrawingPaintStyle(); - - // Draw focused circles around the points to make them more visible during creation - drawFocusedCircle( + drawPointOffset( + startOffset, + epochToX, + quoteToY, + canvas, paintStyle, interactableDrawing.config.lineStyle, - canvas, - startOffset, - FibfanConstants.focusedCircleRadius, - FibfanConstants.pointRadius, + radius: FibfanConstants.pointRadius, ); - - drawFocusedCircle( + drawPointOffset( + endOffset, + epochToX, + quoteToY, + canvas, paintStyle, interactableDrawing.config.lineStyle, - canvas, - endOffset, - FibfanConstants.focusedCircleRadius, - FibfanConstants.pointRadius, + radius: FibfanConstants.pointRadius, ); // Draw alignment guides on each edge point when dragging @@ -245,10 +244,10 @@ class FibfanAddingPreviewMobile FibfanConstants.dashOpacity, ); - for (final double ratio in FibonacciFanHelpers.fibRatios) { + for (final FibonacciLevel level in FibonacciFanHelpers.fibonacciLevels) { final Offset fanPoint = Offset( startOffset.dx + deltaX, - startOffset.dy + deltaY * ratio, + startOffset.dy + deltaY * level.ratio, ); // Extend line to the edge of the screen diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 61099ea6e..9f828788c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -221,9 +221,12 @@ class FibfanInteractableDrawing final double baseAngle = math.atan2(deltaY, deltaX); // Check each fan line using angle-based calculations - for (final double ratio in FibonacciFanHelpers.fibRatios) { - // Calculate angle as a percentage of the base angle - final double fanAngle = baseAngle * ratio; + for (final FibonacciLevel level in FibonacciFanHelpers.fibonacciLevels) { + // Calculate angle: 0% should point to end point, 100% should be horizontal (0 degrees) + // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) + const double horizontalAngle = 0; // Horizontal reference + final double fanAngle = + baseAngle + (horizontalAngle - baseAngle) * level.ratio; // Extend the line to the edge of the screen using trigonometry final double screenWidth = drawingContext.contentSize.width; @@ -306,7 +309,6 @@ class FibfanInteractableDrawing canvas, startOffset, deltaX, deltaY, size, paintStyle, fillStyle); FibonacciFanHelpers.drawFanLabels( canvas, startOffset, deltaX, deltaY, size, lineStyle, - fibonacciLabels: FibonacciFanHelpers.fibonacciLabels, fibonacciLevelColors: config.fibonacciLevelColors); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index b2d28c77f..e727aff36 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -4,6 +4,46 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; +/// Represents a single Fibonacci level with all its associated properties. +/// +/// This class encapsulates the ratio, label, and color key for each +/// Fibonacci retracement level, providing a more structured and +/// maintainable approach to managing level data. +@immutable +class FibonacciLevel { + /// Creates a new Fibonacci level with the specified properties. + const FibonacciLevel({ + required this.ratio, + required this.label, + required this.colorKey, + }); + + /// The mathematical ratio for this Fibonacci level (0.0 to 1.0). + final double ratio; + + /// Human-readable percentage label (e.g., "38.2%", "61.8%"). + final String label; + + /// Color key for customizable styling (e.g., "level38_2"). + final String colorKey; + + @override + String toString() => + 'FibonacciLevel(ratio: $ratio, label: $label, colorKey: $colorKey)'; + + @override + bool operator ==(Object other) => + identical(this, other) || + other is FibonacciLevel && + runtimeType == other.runtimeType && + ratio == other.ratio && + label == other.label && + colorKey == other.colorKey; + + @override + int get hashCode => ratio.hashCode ^ label.hashCode ^ colorKey.hashCode; +} + /// Constants for Fibonacci Fan drawing operations. /// /// This class centralizes all magic numbers used throughout the Fibonacci Fan @@ -329,6 +369,9 @@ class FibonacciFanHelpers { /// performance during animations and frequent redraws. static TextPainter getCachedTextPainter( String text, Color color, double fontSize) { + // Clear cache to ensure fresh text painters with updated labels + _textPainterCache.clear(); + final String key = 'text_${text}_${color.value}_$fontSize'; return _textPainterCache.putIfAbsent(key, () { final textPainter = TextPainter( @@ -489,76 +532,78 @@ class FibonacciFanHelpers { return deltaX.abs() > threshold || deltaY.abs() > threshold; } - /// Fibonacci levels with their ratios, labels, and color keys. - /// - /// This map defines the standard Fibonacci retracement levels used in - /// technical analysis. Each level contains: - /// - The mathematical ratio (key) - /// - A human-readable percentage label - /// - A color key for customizable styling - /// - /// **Fibonacci Levels:** - /// - **0.0**: 0% - The baseline level - /// - **0.382**: 38.2% - First major retracement level - /// - **0.5**: 50% - Midpoint retracement (not technically Fibonacci but commonly used) - /// - **0.618**: 61.8% - Golden ratio retracement level - /// - **1.0**: 100% - Full retracement level - static final Map> fibonacciLevels = { - 0.0: {'label': '0%', 'colorKey': 'level0'}, - 0.382: {'label': '38.2%', 'colorKey': 'level38_2'}, - 0.5: {'label': '50%', 'colorKey': 'level50'}, - 0.618: {'label': '61.8%', 'colorKey': 'level61_8'}, - 1.0: {'label': '100%', 'colorKey': 'level100'}, - }; - - /// Fibonacci ratios for the fan lines in the desired visual order. - /// - /// Returns the Fibonacci ratios in reverse order (1.0 to 0.0) to ensure - /// proper visual layering when drawing the fan lines. This ordering - /// prevents visual overlap issues and ensures consistent rendering. - /// - /// **Visual Order (top to bottom):** - /// 1. 100% (1.0) - Steepest line - /// 2. 61.8% (0.618) - Golden ratio line - /// 3. 50% (0.5) - Midpoint line - /// 4. 38.2% (0.382) - First retracement line - /// 5. 0% (0.0) - Baseline (horizontal) - static List get fibRatios => [1.0, 0.618, 0.5, 0.382, 0.0]; - - /// Labels for each Fibonacci level in the desired visual order. - /// - /// Provides human-readable percentage labels corresponding to each - /// Fibonacci ratio. These labels are displayed next to their respective - /// fan lines to help users identify support and resistance levels. - /// - /// **Returns:** List of percentage strings in visual order - static List get fibonacciLabels => [ - fibonacciLevels[0.0]!['label']!, // 0% - fibonacciLevels[0.382]!['label']!, // 38.2% - fibonacciLevels[0.5]!['label']!, // 50% - fibonacciLevels[0.618]!['label']!, // 61.8% - fibonacciLevels[1.0]!['label']!, // 100% - ]; - - /// Color keys for each Fibonacci level in the desired visual order. - /// - /// Provides color mapping keys that can be used to apply custom colors - /// to individual Fibonacci levels. This allows for color-coded - /// visualization where different levels can have distinct appearances. - /// - /// **Color Keys:** - /// - `level0` - For 0% line - /// - `level38_2` - For 38.2% line - /// - `level50` - For 50% line - /// - `level61_8` - For 61.8% line - /// - `level100` - For 100% line - static List get fibonacciColorKeys => [ - fibonacciLevels[0.0]!['colorKey']!, // level0 for 0% - fibonacciLevels[0.382]!['colorKey']!, // level38_2 for 38.2% - fibonacciLevels[0.5]!['colorKey']!, // level50 for 50% - fibonacciLevels[0.618]!['colorKey']!, // level61_8 for 61.8% - fibonacciLevels[1.0]!['colorKey']!, // level100 for 100% - ]; + /// Fibonacci levels in the desired visual order for drawing operations. + /// + /// This list defines all Fibonacci retracement levels used in the fan, + /// ordered from flattest to steepest for proper visual layering. + /// Each level contains its ratio, display label, and color key. + /// + /// **Visual Order (bottom to top):** + /// 1. 0% (0.0) - Baseline level (horizontal, flattest) + /// 2. 38.2% (0.382) - First major retracement level + /// 3. 50% (0.5) - Midpoint retracement (commonly used) + /// 4. 61.8% (0.618) - Golden ratio retracement level + /// 5. 100% (1.0) - Steepest line, full retracement + /// + /// **Benefits of this approach:** + /// - Single source of truth for all level data + /// - Consistent ordering across all operations + /// - Type-safe access to level properties + /// - Easy to add/remove/modify levels + /// - Eliminates data duplication + static const List fibonacciLevels = [ + FibonacciLevel(ratio: 0, label: '0%', colorKey: 'level0'), + FibonacciLevel(ratio: 0.382, label: '38.2%', colorKey: 'level38_2'), + FibonacciLevel(ratio: 0.5, label: '50%', colorKey: 'level50'), + FibonacciLevel(ratio: 0.618, label: '61.8%', colorKey: 'level61_8'), + FibonacciLevel(ratio: 1, label: '100%', colorKey: 'level100'), + ]; + + /// Gets a Fibonacci level by its ratio value. + /// + /// Provides convenient access to level data when you have the ratio. + /// Returns null if no level with the specified ratio exists. + /// + /// **Parameters:** + /// - [ratio]: The mathematical ratio to search for + /// + /// **Returns:** The matching FibonacciLevel or null if not found + /// + /// **Example:** + /// ```dart + /// final goldenLevel = FibonacciFanHelpers.getLevelByRatio(0.618); + /// print(goldenLevel?.label); // "61.8%" + /// ``` + static FibonacciLevel? getLevelByRatio(double ratio) { + try { + return fibonacciLevels.firstWhere((level) => level.ratio == ratio); + } on StateError { + return null; + } + } + + /// Gets a Fibonacci level by its color key. + /// + /// Provides convenient access to level data when you have the color key. + /// Returns null if no level with the specified color key exists. + /// + /// **Parameters:** + /// - [colorKey]: The color key to search for + /// + /// **Returns:** The matching FibonacciLevel or null if not found + /// + /// **Example:** + /// ```dart + /// final level = FibonacciFanHelpers.getLevelByColorKey('level61_8'); + /// print(level?.ratio); // 0.618 + /// ``` + static FibonacciLevel? getLevelByColorKey(String colorKey) { + try { + return fibonacciLevels.firstWhere((level) => level.colorKey == colorKey); + } on StateError { + return null; + } + } /// Draws the filled areas between fan lines using angle-based calculations. /// @@ -598,13 +643,15 @@ class FibonacciFanHelpers { // Calculate the base angle from start to end point final double baseAngle = math.atan2(deltaY, deltaX); - for (int i = 0; i < fibRatios.length - 1; i++) { - final double ratio1 = fibRatios[i]; - final double ratio2 = fibRatios[i + 1]; + for (int i = 0; i < fibonacciLevels.length - 1; i++) { + final double ratio1 = fibonacciLevels[i].ratio; + final double ratio2 = fibonacciLevels[i + 1].ratio; - // Calculate angles as percentages of the base angle - final double angle1 = baseAngle * ratio1; - final double angle2 = baseAngle * ratio2; + // Calculate angles: 0% should point to end point, 100% should be horizontal (0 degrees) + // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) + const double horizontalAngle = 0; // Horizontal reference + final double angle1 = baseAngle + (horizontalAngle - baseAngle) * ratio1; + final double angle2 = baseAngle + (horizontalAngle - baseAngle) * ratio2; // Extend lines to the edge of the screen using angle-based calculations final double screenWidth = size.width; @@ -691,19 +738,21 @@ class FibonacciFanHelpers { // Calculate the base angle from start to end point final double baseAngle = math.atan2(deltaY, deltaX); - for (int i = 0; i < fibRatios.length; i++) { - final double ratio = fibRatios[i]; - final String colorKey = fibonacciColorKeys[i]; + for (int i = 0; i < fibonacciLevels.length; i++) { + final FibonacciLevel level = fibonacciLevels[i]; final Color lineColor = (fibonacciLevelColors != null && - fibonacciLevelColors.containsKey(colorKey)) - ? fibonacciLevelColors[colorKey]! + fibonacciLevelColors.containsKey(level.colorKey)) + ? fibonacciLevelColors[level.colorKey]! : lineStyle.color; final Paint linePaint = getCachedLinePaint(lineColor, lineStyle.thickness); - // Calculate angle as a percentage of the base angle - final double fanAngle = baseAngle * ratio; + // Calculate angle: 0% should point to end point, 100% should be horizontal (0 degrees) + // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) + const double horizontalAngle = 0; // Horizontal reference + final double fanAngle = + baseAngle + (horizontalAngle - baseAngle) * level.ratio; // Extend line to the edge of the screen using angle-based calculations final double screenWidth = size.width; @@ -743,7 +792,6 @@ class FibonacciFanHelpers { /// - [deltaY]: Vertical distance from start to end point /// - [size]: Canvas size for boundary calculations /// - [lineStyle]: Default line style for fallback color - /// - [fibonacciLabels]: List of percentage labels to display /// - [fibonacciLevelColors]: Optional custom colors for each level /// /// **Label Positioning:** @@ -762,7 +810,6 @@ class FibonacciFanHelpers { double deltaY, Size size, LineStyle lineStyle, { - required List fibonacciLabels, Map? fibonacciLevelColors, }) { // Calculate the base angle from start to end point @@ -772,12 +819,14 @@ class FibonacciFanHelpers { final double labelDistance = math.sqrt(deltaX * deltaX + deltaY * deltaY) * FibfanConstants.labelPositionMultiplier; - for (int i = 0; i < FibonacciFanHelpers.fibRatios.length; i++) { - final double ratio = FibonacciFanHelpers.fibRatios[i]; - final String label = i < fibonacciLabels.length ? fibonacciLabels[i] : ''; + for (int i = 0; i < FibonacciFanHelpers.fibonacciLevels.length; i++) { + final FibonacciLevel level = FibonacciFanHelpers.fibonacciLevels[i]; - // Calculate angle as a percentage of the base angle - final double fanAngle = baseAngle * ratio; + // Calculate angle: 0% should point to end point, 100% should be horizontal (0 degrees) + // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) + const double horizontalAngle = 0; // Horizontal reference + final double fanAngle = + baseAngle + (horizontalAngle - baseAngle) * level.ratio; // Calculate label position along the fan line final Offset labelPosition = Offset( @@ -786,14 +835,13 @@ class FibonacciFanHelpers { ); // Use custom color if provided, otherwise use default line style color - final String colorKey = fibonacciColorKeys[i]; final Color labelColor = (fibonacciLevelColors != null && - fibonacciLevelColors.containsKey(colorKey)) - ? fibonacciLevelColors[colorKey]! + fibonacciLevelColors.containsKey(level.colorKey)) + ? fibonacciLevelColors[level.colorKey]! : lineStyle.color; final TextPainter textPainter = getCachedTextPainter( - label, + level.label, labelColor, FibfanConstants.labelFontSize, ); From 12ecc09f66bc871ca9c4d585dd344ae2ba0216fa Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 1 Jul 2025 11:47:15 +0800 Subject: [PATCH 290/311] perf(fibfan): optimize text painter cache to eliminate performance bottleneck Fix critical performance issue where text painter cache was being cleared on every getCachedTextPainter() call, completely negating caching benefits. Changes: - Remove unnecessary _textPainterCache.clear() from getCachedTextPainter() - Add smart cache invalidation methods for selective cache management: * clearTextPainterCache() - clears only text painter cache * clearTextPainterCacheForColor() - targeted color-based invalidation * clearTextPainterCacheForFontSize() - targeted font size invalidation * clearPaintObjectCaches() - clears paint caches while preserving text cache Performance Impact: - Eliminates TextPainter object creation overhead during animations - Reduces memory allocation and garbage collection pressure - Significantly improves label rendering performance during frequent redraws - Maintains cache efficiency while providing granular invalidation control The fix ensures Fibonacci level labels (0%, 38.2%, 50%, 61.8%, 100%) are properly cached and reused, especially beneficial during chart animations and user interactions where labels are rendered repeatedly. Resolves: Performance issue identified in code review --- .../interactable_drawings/fibfan/helpers.dart | 81 ++++++++++++++++++- 1 file changed, 78 insertions(+), 3 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index e727aff36..83a7dfcf4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -369,9 +369,6 @@ class FibonacciFanHelpers { /// performance during animations and frequent redraws. static TextPainter getCachedTextPainter( String text, Color color, double fontSize) { - // Clear cache to ensure fresh text painters with updated labels - _textPainterCache.clear(); - final String key = 'text_${text}_${color.value}_$fontSize'; return _textPainterCache.putIfAbsent(key, () { final textPainter = TextPainter( @@ -410,6 +407,84 @@ class FibonacciFanHelpers { _textPainterCache.clear(); } + /// Clears only the text painter cache. + /// + /// This method provides selective cache invalidation for text painters + /// without affecting paint object caches. Use this when text styling + /// changes but paint configurations remain the same. + /// + /// **Use Cases:** + /// - Font size changes in user preferences + /// - Text color theme updates + /// - Label content modifications + /// - Localization changes affecting label text + /// + /// **Performance Benefit:** Preserves paint object caches while ensuring + /// text rendering reflects the latest styling changes. + static void clearTextPainterCache() { + _textPainterCache.clear(); + } + + /// Clears text painter cache entries for a specific color. + /// + /// Provides targeted cache invalidation when only specific color + /// configurations have changed. This is more efficient than clearing + /// the entire text painter cache. + /// + /// **Parameters:** + /// - [color]: The color for which to clear cached text painters + /// + /// **Use Cases:** + /// - Single color theme updates + /// - User customization of specific Fibonacci level colors + /// - Selective color scheme changes + /// + /// **Performance Benefit:** Preserves text painters with other colors, + /// reducing the need to recreate unaffected cache entries. + static void clearTextPainterCacheForColor(Color color) { + _textPainterCache.removeWhere((key, _) => key.contains('_${color.value}_')); + } + + /// Clears text painter cache entries for a specific font size. + /// + /// Provides targeted cache invalidation when font size preferences + /// change. This is more efficient than clearing the entire cache + /// when only font size has been modified. + /// + /// **Parameters:** + /// - [fontSize]: The font size for which to clear cached text painters + /// + /// **Use Cases:** + /// - User font size preference changes + /// - Accessibility font scaling updates + /// - Dynamic font size adjustments + /// + /// **Performance Benefit:** Preserves text painters with other font sizes, + /// maintaining cache efficiency for unaffected configurations. + static void clearTextPainterCacheForFontSize(double fontSize) { + _textPainterCache.removeWhere((key, _) => key.endsWith('_$fontSize')); + } + + /// Clears only paint object caches, preserving text painter cache. + /// + /// This method provides selective cache invalidation for paint objects + /// without affecting text painter caches. Use this when paint styling + /// changes but text configurations remain the same. + /// + /// **Use Cases:** + /// - Line thickness changes + /// - Paint color updates (non-text) + /// - Stroke style modifications + /// - Fill opacity adjustments + /// + /// **Performance Benefit:** Preserves text painter caches while ensuring + /// paint rendering reflects the latest styling changes. + static void clearPaintObjectCaches() { + _linePaintCache.clear(); + _fillPaintCache.clear(); + _dashPaintCache.clear(); + } + /// Gets cache statistics for performance monitoring. /// /// Returns information about the current state of all paint caches. From ede97a510e463464a0bddb9d1e0ff1a941e522a6 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 1 Jul 2025 13:37:30 +0800 Subject: [PATCH 291/311] refactor(fibfan): replace nullable bool with enum for drag state - Add FibfanDragState enum with explicit drag states - Replace bool? isDraggingStartPoint with FibfanDragState? _dragState - Refactor drag logic to use switch statements for better readability - Improve visual feedback and alignment guide logic - Enhance code maintainability and type safety Addresses sourcery-ai suggestion to improve drag state management in Fibonacci Fan drawing tool. Files changed: - lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/drag_state.dart (new) - lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart --- .../fibfan/drag_state.dart | 25 +++ .../fibfan/fibfan_interactable_drawing.dart | 188 ++++++++++-------- 2 files changed, 132 insertions(+), 81 deletions(-) create mode 100644 lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/drag_state.dart diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/drag_state.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/drag_state.dart new file mode 100644 index 000000000..e5aca6db3 --- /dev/null +++ b/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, +} diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 9f828788c..e2fd032d9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -9,6 +9,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_too import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/extensions/extensions.dart'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/animation_info.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/drag_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/widgets/color_picker.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; @@ -93,16 +94,17 @@ class FibfanInteractableDrawing /// its respective Fibonacci ratio. EdgePoint? endPoint; - /// Tracks which point is being dragged during user interaction. + /// Tracks the current drag state during user interaction. /// /// This state variable enables precise drag behavior by distinguishing between: - /// - `null`: User is dragging the entire fan (both points move together) - /// - `true`: User is dragging only the start point - /// - `false`: User is dragging only the end point + /// - `null`: No dragging is currently active + /// - `FibfanDragState.draggingStartPoint`: User is dragging only the start point + /// - `FibfanDragState.draggingEndPoint`: User is dragging only the end point + /// - `FibfanDragState.draggingEntireFan`: User is dragging the entire fan (both points move together) /// /// The value is set during [onDragStart] based on hit testing and cleared /// during [onDragEnd] to reset the interaction state. - bool? isDraggingStartPoint; + FibfanDragState? _dragState; /// Current hover position for desktop interactions. /// @@ -148,19 +150,19 @@ class FibfanInteractableDrawing // If the drag is starting on the start point if (startDistance <= hitTestMargin) { - isDraggingStartPoint = true; + _dragState = FibfanDragState.draggingStartPoint; return; } // If the drag is starting on the end point if (endDistance <= hitTestMargin) { - isDraggingStartPoint = false; + _dragState = FibfanDragState.draggingEndPoint; return; } // Check if the drag is on any of the fan lines if (_hitTestFanLines(details.localPosition, epochToX, quoteToY)) { - isDraggingStartPoint = null; // Dragging the whole fan + _dragState = FibfanDragState.draggingEntireFan; return; } } @@ -317,14 +319,17 @@ class FibfanInteractableDrawing drawingState.contains(DrawingToolState.dragging)) { // Handle individual point dragging with differentiated visual feedback if (drawingState.contains(DrawingToolState.dragging) && - isDraggingStartPoint != null) { + (_dragState == FibfanDragState.draggingStartPoint || + _dragState == FibfanDragState.draggingEndPoint)) { // Draw focused circle (glowing effect) only on the point being dragged // This provides clear visual feedback about which point is actively being manipulated drawFocusedCircle( paintStyle, lineStyle, canvas, - isDraggingStartPoint == true ? startOffset : endOffset, + _dragState == FibfanDragState.draggingStartPoint + ? startOffset + : endOffset, FibfanConstants.focusedCircleRadius * animationInfo.stateChangePercent, FibfanConstants.focusedCircleStroke * @@ -335,7 +340,9 @@ class FibfanInteractableDrawing // This maintains visibility of the stationary point while clearly distinguishing // it from the actively dragged point drawPoint( - isDraggingStartPoint == true ? endPoint! : startPoint!, + _dragState == FibfanDragState.draggingStartPoint + ? endPoint! + : startPoint!, epochToX, quoteToY, canvas, @@ -370,21 +377,26 @@ class FibfanInteractableDrawing } // Draw alignment guides when dragging - if (drawingState.contains(DrawingToolState.dragging) && - isDraggingStartPoint != null) { - if (isDraggingStartPoint!) { - drawPointAlignmentGuides(canvas, size, startOffset, - lineColor: config.lineStyle.color); - } else { - drawPointAlignmentGuides(canvas, size, endOffset, - lineColor: config.lineStyle.color); + if (drawingState.contains(DrawingToolState.dragging)) { + switch (_dragState) { + case FibfanDragState.draggingStartPoint: + drawPointAlignmentGuides(canvas, size, startOffset, + lineColor: config.lineStyle.color); + break; + case FibfanDragState.draggingEndPoint: + drawPointAlignmentGuides(canvas, size, endOffset, + lineColor: config.lineStyle.color); + break; + case FibfanDragState.draggingEntireFan: + drawPointAlignmentGuides(canvas, size, startOffset, + lineColor: config.lineStyle.color); + drawPointAlignmentGuides(canvas, size, endOffset, + lineColor: config.lineStyle.color); + break; + case null: + // No specific drag state, don't draw alignment guides + break; } - } else if (drawingState.contains(DrawingToolState.dragging) && - isDraggingStartPoint == null) { - drawPointAlignmentGuides(canvas, size, startOffset, - lineColor: config.lineStyle.color); - drawPointAlignmentGuides(canvas, size, endOffset, - lineColor: config.lineStyle.color); } } else if (startPoint != null && _hoverPosition != null) { // Preview mode - draw fan from start point to hover position @@ -547,68 +559,82 @@ class FibfanInteractableDrawing // Get the drag delta in screen coordinates final Offset delta = details.delta; - // If we're dragging a specific point (start or end point) - if (isDraggingStartPoint != null) { - // Get the current point being dragged - final EdgePoint pointBeingDragged = - isDraggingStartPoint! ? startPoint! : endPoint!; + // Handle different drag states + switch (_dragState) { + case FibfanDragState.draggingStartPoint: + // Get the current screen position of the start point + final Offset currentOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); - // Get the current screen position of the point - final Offset currentOffset = Offset( - epochToX(pointBeingDragged.epoch), - quoteToY(pointBeingDragged.quote), - ); + // Apply the delta to get the new screen position + final Offset newOffset = currentOffset + delta; - // Apply the delta to get the new screen position - final Offset newOffset = currentOffset + delta; + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); - // Convert back to epoch and quote coordinates - final int newEpoch = epochFromX(newOffset.dx); - final double newQuote = quoteFromY(newOffset.dy); + // Update the start point + startPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + break; - // Create updated point - final EdgePoint updatedPoint = EdgePoint( - epoch: newEpoch, - quote: newQuote, - ); + case FibfanDragState.draggingEndPoint: + // Get the current screen position of the end point + final Offset currentOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); - // Update the appropriate point - if (isDraggingStartPoint!) { - startPoint = updatedPoint; - } else { - endPoint = updatedPoint; - } - } else { - // We're dragging the whole fan - // Convert start and end points to screen coordinates - final Offset startOffset = Offset( - epochToX(startPoint!.epoch), - quoteToY(startPoint!.quote), - ); - final Offset endOffset = Offset( - epochToX(endPoint!.epoch), - quoteToY(endPoint!.quote), - ); + // Apply the delta to get the new screen position + final Offset newOffset = currentOffset + delta; + + // Convert back to epoch and quote coordinates + final int newEpoch = epochFromX(newOffset.dx); + final double newQuote = quoteFromY(newOffset.dy); + + // Update the end point + endPoint = EdgePoint( + epoch: newEpoch, + quote: newQuote, + ); + break; + + case FibfanDragState.draggingEntireFan: + case null: + // We're dragging the whole fan + // Convert start and end points to screen coordinates + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); - // Apply the delta to get new screen coordinates - final Offset newStartOffset = startOffset + delta; - final Offset newEndOffset = endOffset + delta; + // Apply the delta to get new screen coordinates + final Offset newStartOffset = startOffset + delta; + final Offset newEndOffset = endOffset + delta; - // Convert back to epoch and quote coordinates - final int newStartEpoch = epochFromX(newStartOffset.dx); - final double newStartQuote = quoteFromY(newStartOffset.dy); - final int newEndEpoch = epochFromX(newEndOffset.dx); - final double newEndQuote = quoteFromY(newEndOffset.dy); + // Convert back to epoch and quote coordinates + final int newStartEpoch = epochFromX(newStartOffset.dx); + final double newStartQuote = quoteFromY(newStartOffset.dy); + final int newEndEpoch = epochFromX(newEndOffset.dx); + final double newEndQuote = quoteFromY(newEndOffset.dy); - // Update the start and end points - startPoint = EdgePoint( - epoch: newStartEpoch, - quote: newStartQuote, - ); - endPoint = EdgePoint( - epoch: newEndEpoch, - quote: newEndQuote, - ); + // Update the start and end points + startPoint = EdgePoint( + epoch: newStartEpoch, + quote: newStartQuote, + ); + endPoint = EdgePoint( + epoch: newEndEpoch, + quote: newEndQuote, + ); } } @@ -620,8 +646,8 @@ class FibfanInteractableDrawing EpochToX epochToX, QuoteToY quoteToY, ) { - // Reset the dragging flag when drag is complete - isDraggingStartPoint = null; + // Reset the drag state when drag is complete + _dragState = null; } @override From 1c78e8fe14c3c321c97e7d4ed00ed59072c3edde Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 1 Jul 2025 13:49:40 +0800 Subject: [PATCH 292/311] fix(fibfan): align mobile preview angle calculations with main fan - Replace linear interpolation with angle-based calculations in mobile preview - Add missing dart:math import for trigonometric functions - Use math.atan2() and math.tan() for consistent fan line positioning - Ensure preview matches final fan exactly, especially for steep angles - Add coordinate validation before drawing operations Fixes inconsistency where mobile preview used different calculation method than main fan implementation, causing visual mismatches particularly for steep Fibonacci fans. --- .../fibfan/fibfan_adding_preview_mobile.dart | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 2c0d3a65f..461e2b57e 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -1,3 +1,4 @@ +import 'dart:math' as math; import 'dart:ui'; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/chart_data.dart'; @@ -230,7 +231,7 @@ class FibfanAddingPreviewMobile } } - /// Draws preview fan lines with dashed style + /// Draws preview fan lines with dashed style using angle-based calculations void _drawPreviewFanLines( Canvas canvas, Offset startOffset, @@ -244,31 +245,31 @@ class FibfanAddingPreviewMobile FibfanConstants.dashOpacity, ); + // Calculate the base angle from start to end point (same as main fan) + final double baseAngle = math.atan2(deltaY, deltaX); + for (final FibonacciLevel level in FibonacciFanHelpers.fibonacciLevels) { - final Offset fanPoint = Offset( - startOffset.dx + deltaX, - startOffset.dy + deltaY * level.ratio, - ); + // Calculate angle: 0% should point to end point, 100% should be horizontal (0 degrees) + // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) + const double horizontalAngle = 0; // Horizontal reference + final double fanAngle = + baseAngle + (horizontalAngle - baseAngle) * level.ratio; - // Extend line to the edge of the screen + // Extend line to the edge of the screen using angle-based calculations final double screenWidth = size.width; - final double deltaXFan = fanPoint.dx - startOffset.dx; + final double distanceToEdge = screenWidth - startOffset.dx; - // Handle vertical lines and avoid division by zero - Offset extendedPoint; - if (deltaXFan.abs() < FibfanConstants.verticalLineThreshold) { - // Vertical line - extendedPoint = Offset(fanPoint.dx, size.height); - } else { - final double slope = (fanPoint.dy - startOffset.dy) / deltaXFan; - extendedPoint = Offset( - screenWidth, - startOffset.dy + slope * (screenWidth - startOffset.dx), - ); - } + // Calculate extended point using trigonometry (same as main fan) + final Offset extendedPoint = Offset( + screenWidth, + startOffset.dy + distanceToEdge * math.tan(fanAngle), + ); - // Draw dashed line - _drawDashedLine(canvas, startOffset, extendedPoint, dashPaint); + // Validate coordinates before drawing + if (FibonacciFanHelpers.areTwoOffsetsValid(startOffset, extendedPoint)) { + // Draw dashed line + _drawDashedLine(canvas, startOffset, extendedPoint, dashPaint); + } } } From 0899b1608a1c9a6783078d2a0977418f814ed6f9 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 9 Jul 2025 13:53:15 +0800 Subject: [PATCH 293/311] fix: resolve Fibonacci Fan compilation errors and implement completion callbacks - Fix method signature mismatches in FibfanInteractableDrawing - Add missing onAddingStateChange parameter to preview methods - Fix constructor issues in both desktop and mobile preview classes - Remove extra VoidCallback onDone parameter from onCreateTap methods - Implement proper completion callbacks: - Desktop: 2-step process (start point -> end point) - Mobile: 1-step process (auto-positioned points) - Add required imports for AddingStateInfo - Fix code style issues (TODO comments) All compilation errors resolved, no analysis issues found. --- .../fibfan/fibfan_adding_preview_desktop.dart | 9 +++++++-- .../fibfan/fibfan_adding_preview_mobile.dart | 7 +++++-- .../fibfan/fibfan_interactable_drawing.dart | 5 +++++ 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index a32e45119..9d58c7392 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -12,6 +12,7 @@ import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/gestures.dart'; import '../../helpers/types.dart'; +import '../../interactive_layer_states/interactive_adding_tool_state.dart'; import '../drawing_adding_preview.dart'; import 'fibfan_interactable_drawing.dart'; @@ -55,9 +56,11 @@ class FibfanAddingPreviewDesktop /// **Parameters:** /// - [interactiveLayerBehaviour]: Desktop interaction behavior handler /// - [interactableDrawing]: The Fibonacci Fan drawing being created + /// - [onAddingStateChange]: Callback for adding state changes FibfanAddingPreviewDesktop({ required super.interactiveLayerBehaviour, required super.interactableDrawing, + required super.onAddingStateChange, }); /// Current mouse hover position for real-time preview. @@ -230,7 +233,6 @@ class FibfanAddingPreviewDesktop QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - VoidCallback onDone, ) { if (interactableDrawing.startPoint == null) { // First tap - set start point @@ -238,13 +240,16 @@ class FibfanAddingPreviewDesktop epoch: epochFromX(details.localPosition.dx), quote: quoteFromY(details.localPosition.dy), ); + // Notify that we've completed step 1 of 2 + onAddingStateChange(AddingStateInfo(1, 2)); } else if (interactableDrawing.endPoint == null) { // Second tap - set end point and complete the drawing interactableDrawing.endPoint = EdgePoint( epoch: epochFromX(details.localPosition.dx), quote: quoteFromY(details.localPosition.dy), ); - onDone(); + // Notify that we've completed step 2 of 2 (finished) + onAddingStateChange(AddingStateInfo(2, 2)); } } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 461e2b57e..f9c4197b9 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -11,6 +11,7 @@ import 'package:deriv_chart/src/theme/chart_theme.dart'; import 'package:flutter/gestures.dart'; import '../../helpers/types.dart'; +import '../../interactive_layer_states/interactive_adding_tool_state.dart'; import '../fibfan/helpers.dart'; import '../drawing_adding_preview.dart'; import 'fibfan_interactable_drawing.dart'; @@ -58,9 +59,11 @@ class FibfanAddingPreviewMobile /// **Parameters:** /// - [interactiveLayerBehaviour]: Mobile interaction behavior handler /// - [interactableDrawing]: The Fibonacci Fan drawing being created + /// - [onAddingStateChange]: Callback for adding state changes FibfanAddingPreviewMobile({ required super.interactiveLayerBehaviour, required super.interactableDrawing, + required super.onAddingStateChange, }) { if (interactableDrawing.startPoint == null) { final interactiveLayer = interactiveLayerBehaviour.interactiveLayer; @@ -379,9 +382,9 @@ class FibfanAddingPreviewMobile QuoteFromY quoteFromY, EpochToX epochToX, QuoteToY quoteToY, - VoidCallback onDone, ) { // For mobile, we complete the drawing on first tap since we already have both points - onDone(); + // Notify that we've completed step 1 of 1 (finished) + onAddingStateChange(AddingStateInfo(1, 1)); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index e2fd032d9..30ff2280f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -25,6 +25,7 @@ import '../../helpers/paint_helpers.dart'; import '../../helpers/types.dart'; import '../../interactive_layer_behaviours/interactive_layer_desktop_behaviour.dart'; import '../../interactive_layer_behaviours/interactive_layer_mobile_behaviour.dart'; +import '../../interactive_layer_states/interactive_adding_tool_state.dart'; import '../drawing_v2.dart'; import '../interactable_drawing.dart'; import 'fibfan_adding_preview_desktop.dart'; @@ -674,20 +675,24 @@ class FibfanInteractableDrawing DrawingAddingPreview> getAddingPreviewForDesktopBehaviour( InteractiveLayerDesktopBehaviour layerBehaviour, + Function(AddingStateInfo) onAddingStateChange, ) => FibfanAddingPreviewDesktop( interactiveLayerBehaviour: layerBehaviour, interactableDrawing: this, + onAddingStateChange: onAddingStateChange, ); @override DrawingAddingPreview> getAddingPreviewForMobileBehaviour( InteractiveLayerMobileBehaviour layerBehaviour, + Function(AddingStateInfo) onAddingStateChange, ) => FibfanAddingPreviewMobile( interactiveLayerBehaviour: layerBehaviour, interactableDrawing: this, + onAddingStateChange: onAddingStateChange, ); @override From 97f7e57aad7654315a901512dffd93a6811453fb Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Wed, 9 Jul 2025 14:10:00 +0800 Subject: [PATCH 294/311] feat: update Fibonacci Fan toolbar to match horizontal line implementation and fix default thickness - Replace custom toolbar with proper dropdown components (ColorPickerDropdownButton, LineThicknessDropdownButton) - Update imports to use standard widget components - Fix default thickness from 0.9 to 1 (removes '0 px' display issue) - Remove redundant thickness arguments that match defaults - Ensure toolbar now shows '1 px' instead of '0 px' - Maintain consistent styling with other drawing tools --- .../fibfan/fibfan_drawing_tool_config.dart | 8 +-- .../fibfan/fibfan_interactable_drawing.dart | 50 ++++++------------- 2 files changed, 20 insertions(+), 38 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart index f0cfcaa89..906f3176f 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart @@ -27,10 +27,10 @@ class FibfanDrawingToolConfig extends DrawingToolConfig { String? configId, DrawingData? drawingData, List edgePoints = const [], - this.fillStyle = const LineStyle( - thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), - this.lineStyle = const LineStyle( - thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700), + this.fillStyle = + const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700), + this.lineStyle = + const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700), this.fibonacciLevelColors = const { 'level0': CoreDesignTokens.coreColorSolidBlue700, // Blue for 0% 'level38_2': LightThemeDesignTokens diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 30ff2280f..b6c9509d2 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -11,12 +11,12 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/drawing_adding_preview.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/drag_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart'; -import 'package:deriv_chart/src/deriv_chart/interactive_layer/widgets/color_picker.dart'; import 'package:deriv_chart/src/models/axis_range.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/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; +import 'package:deriv_chart/src/widgets/color_picker/color_picker_dropdown_button.dart'; +import 'package:deriv_chart/src/widgets/dropdown/line_thickness/line_thickness_dropdown_button.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; @@ -698,50 +698,32 @@ class FibfanInteractableDrawing @override Widget buildDrawingToolBarMenu(UpdateDrawingTool onUpdate) => Row( children: [ - _buildLineThicknessIcon(), - const SizedBox(width: FibfanConstants.toolbarSpacing), + _buildLineThicknessIcon(onUpdate), + const SizedBox(width: 4), _buildColorPickerIcon(onUpdate) ], ); Widget _buildColorPickerIcon(UpdateDrawingTool onUpdate) => SizedBox( - width: FibfanConstants.toolbarIconSize, - height: FibfanConstants.toolbarIconSize, - child: ColorPicker( + width: 32, + height: 32, + child: ColorPickerDropdownButton( currentColor: config.lineStyle.color, onColorChanged: (newColor) => onUpdate(config.copyWith( lineStyle: config.lineStyle.copyWith(color: newColor), fillStyle: config.fillStyle.copyWith(color: newColor), + labelStyle: config.labelStyle.copyWith(color: newColor), )), ), ); - Widget _buildLineThicknessIcon() => SizedBox( - width: FibfanConstants.toolbarIconSize, - height: FibfanConstants.toolbarIconSize, - child: TextButton( - style: TextButton.styleFrom( - foregroundColor: Colors.white38, - alignment: Alignment.center, - padding: const EdgeInsets.symmetric(), - shape: RoundedRectangleBorder( - borderRadius: - BorderRadius.circular(FibfanConstants.toolbarBorderRadius), - ), - ), - onPressed: () { - // update line thickness - }, - child: Text( - '${config.lineStyle.thickness.toInt()}px', - style: const TextStyle( - fontSize: FibfanConstants.toolbarFontSize, - color: CoreDesignTokens.coreColorSolidSlate50, - fontWeight: FontWeight.normal, - height: FibfanConstants.toolbarTextHeight, - ), - textAlign: TextAlign.center, - ), - ), + Widget _buildLineThicknessIcon(UpdateDrawingTool onUpdate) => + LineThicknessDropdownButton( + thickness: config.lineStyle.thickness, + onValueChanged: (double newValue) { + onUpdate(config.copyWith( + lineStyle: config.lineStyle.copyWith(thickness: newValue), + )); + }, ); } From 057f7c1e8c689ea897c555946691dbfee8f9db51 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Mon, 14 Jul 2025 13:43:02 +0800 Subject: [PATCH 295/311] feat: update generated files and configurations for fibonacci fan drawing tool - Update fibfan_drawing_tool_config.g.dart with latest generated code - Add chart_axis_config.g.dart and overlay_style.g.dart generated files - Update chart_config.g.dart with new configurations - Modify chart_axis_config.dart and overlay_style.dart source files --- .../fibfan/fibfan_drawing_tool_config.g.dart | 6 +-- lib/src/models/chart_axis_config.dart | 11 ++++++ lib/src/models/chart_axis_config.g.dart | 38 +++++++++++++++++++ lib/src/models/chart_config.g.dart | 9 ++++- .../theme/painting_styles/overlay_style.dart | 22 +++++++++++ .../painting_styles/overlay_style.g.dart | 20 ++++++++++ 6 files changed, 100 insertions(+), 6 deletions(-) create mode 100644 lib/src/models/chart_axis_config.g.dart create mode 100644 lib/src/theme/painting_styles/overlay_style.g.dart diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart index 217697551..704f0d848 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart @@ -18,12 +18,10 @@ FibfanDrawingToolConfig _$FibfanDrawingToolConfigFromJson( .toList() ?? const [], fillStyle: json['fillStyle'] == null - ? const LineStyle( - thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700) + ? const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700) : LineStyle.fromJson(json['fillStyle'] as Map), lineStyle: json['lineStyle'] == null - ? const LineStyle( - thickness: 0.9, color: CoreDesignTokens.coreColorSolidBlue700) + ? const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700) : LineStyle.fromJson(json['lineStyle'] as Map), fibonacciLevelColors: (json['fibonacciLevelColors'] as Map?)?.map( diff --git a/lib/src/models/chart_axis_config.dart b/lib/src/models/chart_axis_config.dart index b717a949c..5a23cb70a 100644 --- a/lib/src/models/chart_axis_config.dart +++ b/lib/src/models/chart_axis_config.dart @@ -1,4 +1,7 @@ import 'package:flutter/foundation.dart'; +import 'package:json_annotation/json_annotation.dart'; + +part 'chart_axis_config.g.dart'; /// Default top bound quote. const double defaultTopBoundQuote = 60; @@ -12,6 +15,7 @@ const double defaultMaxCurrentTickOffset = 150; /// Configuration for the chart axis. @immutable +@JsonSerializable() class ChartAxisConfig { /// Initializes the chart axis configuration. const ChartAxisConfig({ @@ -25,6 +29,10 @@ class ChartAxisConfig { this.smoothScrolling = true, }); + /// Initializes from JSON. + factory ChartAxisConfig.fromJson(Map json) => + _$ChartAxisConfigFromJson(json); + /// Top quote bound target for animated transition. final double initialTopBoundQuote; @@ -60,6 +68,9 @@ class ChartAxisConfig { /// Default is `true`. final bool smoothScrolling; + /// Converts to JSON. + Map toJson() => _$ChartAxisConfigToJson(this); + /// Creates a copy of this ChartAxisConfig but with the given fields replaced. ChartAxisConfig copyWith({ double? initialTopBoundQuote, diff --git a/lib/src/models/chart_axis_config.g.dart b/lib/src/models/chart_axis_config.g.dart new file mode 100644 index 000000000..1d050cb61 --- /dev/null +++ b/lib/src/models/chart_axis_config.g.dart @@ -0,0 +1,38 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND + +part of 'chart_axis_config.dart'; + +// ************************************************************************** +// JsonSerializableGenerator +// ************************************************************************** + +ChartAxisConfig _$ChartAxisConfigFromJson(Map json) => + ChartAxisConfig( + initialTopBoundQuote: + (json['initialTopBoundQuote'] as num?)?.toDouble() ?? + defaultTopBoundQuote, + initialBottomBoundQuote: + (json['initialBottomBoundQuote'] as num?)?.toDouble() ?? + defaultBottomBoundQuote, + maxCurrentTickOffset: + (json['maxCurrentTickOffset'] as num?)?.toDouble() ?? + defaultMaxCurrentTickOffset, + defaultIntervalWidth: + (json['defaultIntervalWidth'] as num?)?.toDouble() ?? 20, + showQuoteGrid: json['showQuoteGrid'] as bool? ?? true, + showEpochGrid: json['showEpochGrid'] as bool? ?? true, + showFrame: json['showFrame'] as bool? ?? false, + smoothScrolling: json['smoothScrolling'] as bool? ?? true, + ); + +Map _$ChartAxisConfigToJson(ChartAxisConfig instance) => + { + 'initialTopBoundQuote': instance.initialTopBoundQuote, + 'initialBottomBoundQuote': instance.initialBottomBoundQuote, + 'maxCurrentTickOffset': instance.maxCurrentTickOffset, + 'showQuoteGrid': instance.showQuoteGrid, + 'showEpochGrid': instance.showEpochGrid, + 'showFrame': instance.showFrame, + 'defaultIntervalWidth': instance.defaultIntervalWidth, + 'smoothScrolling': instance.smoothScrolling, + }; diff --git a/lib/src/models/chart_config.g.dart b/lib/src/models/chart_config.g.dart index 1c59a6904..732bea35b 100644 --- a/lib/src/models/chart_config.g.dart +++ b/lib/src/models/chart_config.g.dart @@ -7,12 +7,17 @@ part of 'chart_config.dart'; // ************************************************************************** ChartConfig _$ChartConfigFromJson(Map json) => ChartConfig( - granularity: json['granularity'] as int, - pipSize: json['pipSize'] as int? ?? 4, + granularity: (json['granularity'] as num).toInt(), + chartAxisConfig: json['chartAxisConfig'] == null + ? const ChartAxisConfig() + : ChartAxisConfig.fromJson( + json['chartAxisConfig'] as Map), + pipSize: (json['pipSize'] as num?)?.toInt() ?? 4, ); Map _$ChartConfigToJson(ChartConfig instance) => { 'pipSize': instance.pipSize, 'granularity': instance.granularity, + 'chartAxisConfig': instance.chartAxisConfig, }; diff --git a/lib/src/theme/painting_styles/overlay_style.dart b/lib/src/theme/painting_styles/overlay_style.dart index 38c6012c7..3fcc46dfe 100644 --- a/lib/src/theme/painting_styles/overlay_style.dart +++ b/lib/src/theme/painting_styles/overlay_style.dart @@ -1,7 +1,11 @@ import 'package:equatable/equatable.dart'; import 'package:flutter/material.dart'; +import 'package:json_annotation/json_annotation.dart'; + +part 'overlay_style.g.dart'; /// Style of the overlay. +@JsonSerializable() class OverlayStyle extends Equatable { /// Initializes a barrier style const OverlayStyle({ @@ -16,15 +20,27 @@ class OverlayStyle extends Equatable { ), }); + /// Initializes from JSON. + factory OverlayStyle.fromJson(Map json) => + _$OverlayStyleFromJson(json); + /// Height of the label. final double labelHeight; /// Color of the overlay barriers. + @JsonKey( + fromJson: _colorFromJson, + toJson: _colorToJson, + ) final Color color; /// Style of the text used in the overlay. + @JsonKey(includeFromJson: false, includeToJson: false) final TextStyle textStyle; + /// Converts to JSON. + Map toJson() => _$OverlayStyleToJson(this); + /// Creates a copy of this object. OverlayStyle copyWith({ double? labelHeight, @@ -43,3 +59,9 @@ class OverlayStyle extends Equatable { @override List get props => [labelHeight, color, textStyle]; } + +/// Converts a Color to JSON representation. +int _colorToJson(Color color) => color.value; + +/// Converts JSON representation to a Color. +Color _colorFromJson(int value) => Color(value); diff --git a/lib/src/theme/painting_styles/overlay_style.g.dart b/lib/src/theme/painting_styles/overlay_style.g.dart new file mode 100644 index 000000000..ba31de275 --- /dev/null +++ b/lib/src/theme/painting_styles/overlay_style.g.dart @@ -0,0 +1,20 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND + +part of 'overlay_style.dart'; + +// ************************************************************************** +// JsonSerializableGenerator +// ************************************************************************** + +OverlayStyle _$OverlayStyleFromJson(Map json) => OverlayStyle( + labelHeight: (json['labelHeight'] as num?)?.toDouble() ?? 24, + color: json['color'] == null + ? const Color(0xFF00A79E) + : _colorFromJson((json['color'] as num).toInt()), + ); + +Map _$OverlayStyleToJson(OverlayStyle instance) => + { + 'labelHeight': instance.labelHeight, + 'color': _colorToJson(instance.color), + }; From 31c6bc2fdf7fe75dfc62d70330dbf528b3ef6f95 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Mon, 14 Jul 2025 14:52:02 +0800 Subject: [PATCH 296/311] feat: add 4 color selection slots for fibfan drawing tool - Add Top & Bottom Lines (0% & 100%) shared color selector - Add individual color selectors for 38.2%, 50%, and 61.8% fibonacci levels - Update buildDrawingToolBarMenu method in fibfan_interactable_drawing.dart - Add tooltips for each color selector for better UX - Maintain existing fibonacciLevelColors map structure - Ensure proper color synchronization between shared levels --- .../fibfan/fibfan_interactable_drawing.dart | 39 ++++++++++++++----- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index b6c9509d2..dc7b8f17c 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -700,20 +700,41 @@ class FibfanInteractableDrawing children: [ _buildLineThicknessIcon(onUpdate), const SizedBox(width: 4), - _buildColorPickerIcon(onUpdate) + _buildFibonacciLevelColorPicker( + 'Top & Bottom (0% & 100%)', 'level0', 'level100', onUpdate), + const SizedBox(width: 4), + _buildFibonacciLevelColorPicker('38.2%', 'level38_2', null, onUpdate), + const SizedBox(width: 4), + _buildFibonacciLevelColorPicker('50%', 'level50', null, onUpdate), + const SizedBox(width: 4), + _buildFibonacciLevelColorPicker('61.8%', 'level61_8', null, onUpdate), ], ); - Widget _buildColorPickerIcon(UpdateDrawingTool onUpdate) => SizedBox( + Widget _buildFibonacciLevelColorPicker(String tooltip, String levelKey, + String? secondLevelKey, UpdateDrawingTool onUpdate) => + SizedBox( width: 32, height: 32, - child: ColorPickerDropdownButton( - currentColor: config.lineStyle.color, - onColorChanged: (newColor) => onUpdate(config.copyWith( - lineStyle: config.lineStyle.copyWith(color: newColor), - fillStyle: config.fillStyle.copyWith(color: newColor), - labelStyle: config.labelStyle.copyWith(color: newColor), - )), + child: Tooltip( + message: tooltip, + child: ColorPickerDropdownButton( + currentColor: config.fibonacciLevelColors[levelKey]!, + onColorChanged: (newColor) { + final Map updatedColors = + Map.from(config.fibonacciLevelColors); + updatedColors[levelKey] = newColor; + + // If a second level key is provided, update it as well (for top & bottom lines) + if (secondLevelKey != null) { + updatedColors[secondLevelKey] = newColor; + } + + onUpdate(config.copyWith( + fibonacciLevelColors: updatedColors, + )); + }, + ), ), ); From 8edd5459857de9cb119f94e61221177caacbdd7a Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Mon, 14 Jul 2025 16:54:04 +0800 Subject: [PATCH 297/311] fix: make fibfan fill color match level0 color from fibonacciLevelColors - Update drawFanFills method in helpers.dart to accept fibonacciLevelColors parameter - Modify fill color logic to use level0 color instead of fillStyle.color - Update fibfan_interactable_drawing.dart to pass fibonacciLevelColors to drawFanFills - Fix linting issues by adding const keywords where appropriate - Ensure fill areas now match the 0% and 100% line colors for visual consistency - Maintain backward compatibility with fallback to fillStyle.color if level0 not available --- .../drawing_tools_dialog.dart | 20 +++++++++---------- .../fibfan/fibfan_drawing_tool_config.dart | 12 +++++------ .../fibfan/fibfan_drawing_tool_config.g.dart | 12 +++++------ .../fibfan/fibfan_drawing_tool_item.dart | 6 +++--- .../fibfan/fibfan_interactable_drawing.dart | 3 ++- .../interactable_drawings/fibfan/helpers.dart | 15 +++++++++++--- .../chart_examples/drawing_tools_screen.dart | 20 +++++++++---------- 7 files changed, 49 insertions(+), 39 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart b/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart index 259282ac4..3980181f6 100644 --- a/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart +++ b/lib/src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart @@ -53,39 +53,39 @@ class _DrawingToolsDialogState extends State { DropdownButton( value: _selectedDrawingTool, hint: Text(ChartLocalization.of(context).selectDrawingTool), - items: const >[ - DropdownMenuItem( + items: >[ + const DropdownMenuItem( child: Text('Channel'), value: ChannelDrawingToolConfig(), ), - DropdownMenuItem( + const DropdownMenuItem( child: Text('Continuous'), value: ContinuousDrawingToolConfig(), ), DropdownMenuItem( - child: Text('Fib Fan'), + child: const Text('Fib Fan'), value: FibfanDrawingToolConfig(), ), - DropdownMenuItem( + const DropdownMenuItem( child: Text('Horizontal'), value: HorizontalDrawingToolConfig(), ), - DropdownMenuItem( + const DropdownMenuItem( child: Text('Line'), value: LineDrawingToolConfig(), ), - DropdownMenuItem( + const DropdownMenuItem( child: Text('Ray'), value: RayDrawingToolConfig(), ), - DropdownMenuItem( + const DropdownMenuItem( child: Text('Rectangle'), value: RectangleDrawingToolConfig()), - DropdownMenuItem( + const DropdownMenuItem( child: Text('Trend'), value: TrendDrawingToolConfig(), ), - DropdownMenuItem( + const DropdownMenuItem( child: Text('Vertical'), value: VerticalDrawingToolConfig(), ) diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart index 906f3176f..1757b56c6 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart @@ -23,14 +23,10 @@ part 'fibfan_drawing_tool_config.g.dart'; @ColorConverter() class FibfanDrawingToolConfig extends DrawingToolConfig { /// Initializes - const FibfanDrawingToolConfig({ + FibfanDrawingToolConfig({ String? configId, DrawingData? drawingData, List edgePoints = const [], - this.fillStyle = - const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700), - this.lineStyle = - const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700), this.fibonacciLevelColors = const { 'level0': CoreDesignTokens.coreColorSolidBlue700, // Blue for 0% 'level38_2': LightThemeDesignTokens @@ -41,12 +37,16 @@ class FibfanDrawingToolConfig extends DrawingToolConfig { .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, diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart index 704f0d848..92bb91329 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.g.dart @@ -17,12 +17,6 @@ FibfanDrawingToolConfig _$FibfanDrawingToolConfigFromJson( ?.map((e) => EdgePoint.fromJson(e as Map)) .toList() ?? const [], - fillStyle: json['fillStyle'] == null - ? const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700) - : LineStyle.fromJson(json['fillStyle'] as Map), - lineStyle: json['lineStyle'] == null - ? const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700) - : LineStyle.fromJson(json['lineStyle'] as Map), fibonacciLevelColors: (json['fibonacciLevelColors'] as Map?)?.map( (k, e) => MapEntry( @@ -38,6 +32,12 @@ FibfanDrawingToolConfig _$FibfanDrawingToolConfigFromJson( .semanticColorYellowSolidBorderStaticMid, 'level100': CoreDesignTokens.coreColorSolidBlue700 }, + fillStyle: json['fillStyle'] == null + ? null + : LineStyle.fromJson(json['fillStyle'] as Map), + lineStyle: json['lineStyle'] == null + ? const LineStyle(color: CoreDesignTokens.coreColorSolidBlue700) + : LineStyle.fromJson(json['lineStyle'] as Map), labelStyle: json['labelStyle'] == null ? const TextStyle( color: CoreDesignTokens.coreColorSolidBlue700, fontSize: 12) diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_item.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_item.dart index a7d26f070..0eb1498fd 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_item.dart +++ b/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, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index dc7b8f17c..80056f64b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -309,7 +309,8 @@ class FibfanInteractableDrawing if (drawingState.contains(DrawingToolState.selected)) { // Draw filled areas between fan lines FibonacciFanHelpers.drawFanFills( - canvas, startOffset, deltaX, deltaY, size, paintStyle, fillStyle); + canvas, startOffset, deltaX, deltaY, size, paintStyle, fillStyle, + fibonacciLevelColors: config.fibonacciLevelColors); FibonacciFanHelpers.drawFanLabels( canvas, startOffset, deltaX, deltaY, size, lineStyle, fibonacciLevelColors: config.fibonacciLevelColors); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index 83a7dfcf4..db6367974 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -701,6 +701,7 @@ class FibonacciFanHelpers { /// - [size]: Canvas size for boundary calculations /// - [paintStyle]: Paint style configuration /// - [fillStyle]: Fill style and color configuration + /// - [fibonacciLevelColors]: Optional custom colors for each level /// /// **Visual Effect:** /// - Even-indexed areas: 10% opacity @@ -713,8 +714,9 @@ class FibonacciFanHelpers { double deltaY, Size size, DrawingPaintStyle paintStyle, - LineStyle fillStyle, - ) { + LineStyle fillStyle, { + Map? fibonacciLevelColors, + }) { // Calculate the base angle from start to end point final double baseAngle = math.atan2(deltaY, deltaX); @@ -755,10 +757,17 @@ class FibonacciFanHelpers { final double opacity = (i % 2 == 0) ? FibfanConstants.evenFillOpacity : FibfanConstants.oddFillOpacity; + + // Use level0 color from fibonacciLevelColors if available, otherwise use fillStyle color + final Color fillColor = (fibonacciLevelColors != null && + fibonacciLevelColors.containsKey('level0')) + ? fibonacciLevelColors['level0']! + : fillStyle.color; + canvas.drawPath( fillPath, paintStyle.fillPaintStyle( - fillStyle.color.withOpacity(opacity), + fillColor.withOpacity(opacity), fillStyle.thickness, ), ); diff --git a/showcase_app/lib/screens/chart_examples/drawing_tools_screen.dart b/showcase_app/lib/screens/chart_examples/drawing_tools_screen.dart index aefcf42cf..76dc5433a 100644 --- a/showcase_app/lib/screens/chart_examples/drawing_tools_screen.dart +++ b/showcase_app/lib/screens/chart_examples/drawing_tools_screen.dart @@ -222,38 +222,38 @@ class _DrawingToolsScreenState DropdownButton( value: _selectedDrawingTool, hint: const Text('Select a drawing tool'), - items: const >[ - DropdownMenuItem( + items: >[ + const DropdownMenuItem( value: LineDrawingToolConfig(), - child: Text('Line'), + child: Text('Trend Line'), ), - DropdownMenuItem( + const DropdownMenuItem( value: HorizontalDrawingToolConfig(), child: Text('Horizontal'), ), - DropdownMenuItem( + const DropdownMenuItem( value: VerticalDrawingToolConfig(), child: Text('Vertical'), ), - DropdownMenuItem( + const DropdownMenuItem( value: RayDrawingToolConfig(), child: Text('Ray'), ), - DropdownMenuItem( + const DropdownMenuItem( value: TrendDrawingToolConfig(), child: Text('Trend'), ), - DropdownMenuItem( + const DropdownMenuItem( value: RectangleDrawingToolConfig(), child: Text('Rectangle'), ), - DropdownMenuItem( + const DropdownMenuItem( value: ChannelDrawingToolConfig(), child: Text('Channel'), ), DropdownMenuItem( value: FibfanDrawingToolConfig(), - child: Text('Fibonacci Fan'), + child: const Text('Fibonacci Fan'), ), ], onChanged: (DrawingToolConfig? config) { From 02bd1a13a914108379ba75823232bba1107c51e6 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 15 Jul 2025 11:09:26 +0800 Subject: [PATCH 298/311] Fix Fibonacci fan angle calculation and update drawing tool config - Updated helpers.dart with corrected angle calculation logic - Modified fibfan_drawing_tool_config.dart for improved functionality --- .../fibfan/fibfan_drawing_tool_config.dart | 5 +-- .../interactable_drawings/fibfan/helpers.dart | 35 +++++-------------- 2 files changed, 11 insertions(+), 29 deletions(-) diff --git a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart index 1757b56c6..924c8c6a8 100644 --- a/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart +++ b/lib/src/add_ons/drawing_tools_ui/fibfan/fibfan_drawing_tool_config.dart @@ -45,8 +45,9 @@ class FibfanDrawingToolConfig extends DrawingToolConfig { fontSize: 12, ), super.number, - }) : fillStyle = fillStyle ?? LineStyle(color: fibonacciLevelColors['level0']!), - super( + }) : fillStyle = + fillStyle ?? LineStyle(color: fibonacciLevelColors['level0']!), + super( configId: configId, drawingData: drawingData, edgePoints: edgePoints, diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index db6367974..407963f7d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -1,6 +1,7 @@ import 'dart:math' as math; import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/drawing_tools/data_model/drawing_paint_style.dart'; +import 'package:deriv_chart/src/theme/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; @@ -173,20 +174,6 @@ class FibfanConstants { /// next to each fan line. static const double labelFontSize = 12; - // ========== Fill Opacity Constants ========== - - /// Opacity for even-indexed fill areas between fan lines. - /// - /// Applied to alternating fill regions to create visual distinction - /// between different Fibonacci levels (10% opacity). - static const double evenFillOpacity = 0.1; - - /// Opacity for odd-indexed fill areas between fan lines. - /// - /// Applied to alternating fill regions to create visual distinction - /// between different Fibonacci levels (5% opacity). - static const double oddFillOpacity = 0.05; - // ========== UI Constants ========== /// Size for toolbar icons (width and height). @@ -753,24 +740,18 @@ class FibonacciFanHelpers { ..lineTo(extendedPoint2.dx, extendedPoint2.dy) ..close(); - // Draw filled area with alternating opacity - final double opacity = (i % 2 == 0) - ? FibfanConstants.evenFillOpacity - : FibfanConstants.oddFillOpacity; - // Use level0 color from fibonacciLevelColors if available, otherwise use fillStyle color final Color fillColor = (fibonacciLevelColors != null && fibonacciLevelColors.containsKey('level0')) ? fibonacciLevelColors['level0']! : fillStyle.color; - - canvas.drawPath( - fillPath, - paintStyle.fillPaintStyle( - fillColor.withOpacity(opacity), - fillStyle.thickness, - ), - ); + + // Create custom fill paint with opacity + final Paint fillPaint = getCachedFillPaint( + fillColor.withOpacity(CoreDesignTokens.coreOpacity100), + fillStyle.thickness); + + canvas.drawPath(fillPath, fillPaint); } } } From 72a647d5b69e5e7ea2da923cb15f2e9a7f324e32 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 15 Jul 2025 13:39:11 +0800 Subject: [PATCH 299/311] feat: implement z-index functionality for edge point labels during drag operations - Add drawLabelsWithZIndex helper function to paint_helpers.dart for reusability - Implement z-index logic where dragged edge point labels appear above non-dragged labels - Refactor fibfan drawing tool to use the new helper function - Reduce code duplication by centralizing label z-index logic - Ensure consistent behavior across both Y-axis (quote) and X-axis (epoch) labels This improves visual feedback during drag operations by preventing label overlap and clearly indicating which point is being actively manipulated. --- .../helpers/paint_helpers.dart | 65 ++++++ .../fibfan/fibfan_interactable_drawing.dart | 194 ++++++++++-------- 2 files changed, 170 insertions(+), 89 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 376ba0e70..295c7c15e 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -3,10 +3,16 @@ import 'dart:ui'; 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/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)}) { @@ -314,6 +320,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({ + required Canvas canvas, + required Size size, + required AnimationInfo animationInfo, + required ChartConfig chartConfig, + required ChartTheme chartTheme, + required GetDrawingState getDrawingState, + required dynamic 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, { diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index aaf298578..e23afebbc 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -458,39 +458,49 @@ class FibfanInteractableDrawing ChartTheme chartTheme, GetDrawingState getDrawingState, ) { - if (getDrawingState(this).contains(DrawingToolState.selected)) { - // Draw value label for start point - if (startPoint != null) { - drawValueLabel( - canvas: canvas, - quoteToY: quoteToY, - value: startPoint!.quote, - pipSize: chartConfig.pipSize, - animationProgress: animationInfo.stateChangePercent, - size: size, - textStyle: config.labelStyle, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - - // Draw value label for end point (offset slightly to avoid overlap) - if (endPoint != null && - startPoint != null && - endPoint!.quote != startPoint!.quote) { - drawValueLabel( - canvas: canvas, - quoteToY: quoteToY, - value: endPoint!.quote, - pipSize: chartConfig.pipSize, - animationProgress: animationInfo.stateChangePercent, - size: size, - textStyle: config.labelStyle, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - } + drawLabelsWithZIndex( + canvas: canvas, + size: size, + animationInfo: animationInfo, + chartConfig: chartConfig, + chartTheme: chartTheme, + getDrawingState: getDrawingState, + drawing: this, + isDraggingStartPoint: _dragState == FibfanDragState.draggingStartPoint, + isDraggingEndPoint: _dragState == FibfanDragState.draggingEndPoint, + drawStartPointLabel: () { + if (startPoint != null) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: startPoint!.quote, + pipSize: chartConfig.pipSize, + animationProgress: animationInfo.stateChangePercent, + size: size, + textStyle: config.labelStyle, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + drawEndPointLabel: () { + if (endPoint != null && + startPoint != null && + endPoint!.quote != startPoint!.quote) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: endPoint!.quote, + pipSize: chartConfig.pipSize, + animationProgress: animationInfo.stateChangePercent, + size: size, + textStyle: config.labelStyle, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + ); paintXAxisLabels( canvas, @@ -515,37 +525,47 @@ class FibfanInteractableDrawing ChartTheme chartTheme, GetDrawingState getDrawingState, ) { - if (getDrawingState(this).contains(DrawingToolState.selected)) { - // Draw epoch label for start point - if (startPoint != null) { - drawEpochLabel( - canvas: canvas, - epochToX: epochToX, - epoch: startPoint!.epoch, - size: size, - textStyle: config.labelStyle, - animationProgress: animationInfo.stateChangePercent, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - - // Draw epoch label for end point (only if different from start point to avoid overlap) - if (endPoint != null && - startPoint != null && - endPoint!.epoch != startPoint!.epoch) { - drawEpochLabel( - canvas: canvas, - epochToX: epochToX, - epoch: endPoint!.epoch, - size: size, - textStyle: config.labelStyle, - animationProgress: animationInfo.stateChangePercent, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - } + drawLabelsWithZIndex( + canvas: canvas, + size: size, + animationInfo: animationInfo, + chartConfig: chartConfig, + chartTheme: chartTheme, + getDrawingState: getDrawingState, + drawing: this, + isDraggingStartPoint: _dragState == FibfanDragState.draggingStartPoint, + isDraggingEndPoint: _dragState == FibfanDragState.draggingEndPoint, + drawStartPointLabel: () { + if (startPoint != null) { + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: startPoint!.epoch, + size: size, + textStyle: config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + drawEndPointLabel: () { + if (endPoint != null && + startPoint != null && + endPoint!.epoch != startPoint!.epoch) { + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: endPoint!.epoch, + size: size, + textStyle: config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + ); } @override @@ -703,41 +723,37 @@ class FibfanInteractableDrawing children: [ _buildLineThicknessIcon(onUpdate), const SizedBox(width: 4), - _buildFibonacciLevelColorPicker( - 'Top & Bottom (0% & 100%)', 'level0', 'level100', onUpdate), + _buildFibonacciLevelColorPicker('level0', 'level100', onUpdate), const SizedBox(width: 4), - _buildFibonacciLevelColorPicker('38.2%', 'level38_2', null, onUpdate), + _buildFibonacciLevelColorPicker('level38_2', null, onUpdate), const SizedBox(width: 4), - _buildFibonacciLevelColorPicker('50%', 'level50', null, onUpdate), + _buildFibonacciLevelColorPicker('level50', null, onUpdate), const SizedBox(width: 4), - _buildFibonacciLevelColorPicker('61.8%', 'level61_8', null, onUpdate), + _buildFibonacciLevelColorPicker('level61_8', null, onUpdate), ], ); - Widget _buildFibonacciLevelColorPicker(String tooltip, String levelKey, + Widget _buildFibonacciLevelColorPicker(String levelKey, String? secondLevelKey, UpdateDrawingTool onUpdate) => SizedBox( width: 32, height: 32, - child: Tooltip( - message: tooltip, - child: ColorPickerDropdownButton( - currentColor: config.fibonacciLevelColors[levelKey]!, - onColorChanged: (newColor) { - final Map updatedColors = - Map.from(config.fibonacciLevelColors); - updatedColors[levelKey] = newColor; - - // If a second level key is provided, update it as well (for top & bottom lines) - if (secondLevelKey != null) { - updatedColors[secondLevelKey] = newColor; - } - - onUpdate(config.copyWith( - fibonacciLevelColors: updatedColors, - )); - }, - ), + child: ColorPickerDropdownButton( + currentColor: config.fibonacciLevelColors[levelKey]!, + onColorChanged: (newColor) { + final Map updatedColors = + Map.from(config.fibonacciLevelColors); + updatedColors[levelKey] = newColor; + + // If a second level key is provided, update it as well (for top & bottom lines) + if (secondLevelKey != null) { + updatedColors[secondLevelKey] = newColor; + } + + onUpdate(config.copyWith( + fibonacciLevelColors: updatedColors, + )); + }, ), ); From 06512b4ebb9b7c2d453d16190f94d0346c970107 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 15 Jul 2025 13:43:23 +0800 Subject: [PATCH 300/311] feat: apply z-index functionality to trend line drawing tool - Update trend line to use the reusable drawLabelsWithZIndex helper function - Implement z-index logic for both Y-axis (quote) and X-axis (epoch) labels - Ensure dragged edge point labels appear above non-dragged labels - Maintain consistent behavior with fibfan drawing tool - Reduce code duplication by leveraging centralized helper function This extends the label z-index functionality to trend lines, providing better visual feedback during drag operations across all two-point drawing tools. --- .../trend_line_interactable_drawing.dart | 149 ++++++++++-------- 1 file changed, 85 insertions(+), 64 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 507a5112d..535d81054 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -303,39 +303,50 @@ class TrendLineInteractableDrawing ChartTheme chartTheme, GetDrawingState getDrawingState, ) { - if (getDrawingState(this).contains(DrawingToolState.selected)) { - // Draw value label for start point - if (startPoint != null) { - drawValueLabel( - canvas: canvas, - quoteToY: quoteToY, - value: startPoint!.quote, - pipSize: chartConfig.pipSize, - animationProgress: animationInfo.stateChangePercent, - size: size, - textStyle: config.labelStyle, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - - // Draw value label for end point (offset slightly to avoid overlap) - if (endPoint != null && - startPoint != null && - endPoint!.quote != startPoint!.quote) { - drawValueLabel( - canvas: canvas, - quoteToY: quoteToY, - value: endPoint!.quote, - pipSize: chartConfig.pipSize, - animationProgress: animationInfo.stateChangePercent, - size: size, - textStyle: config.labelStyle, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - } + drawLabelsWithZIndex( + canvas: canvas, + size: size, + animationInfo: animationInfo, + chartConfig: chartConfig, + chartTheme: chartTheme, + getDrawingState: getDrawingState, + drawing: this, + isDraggingStartPoint: isDraggingStartPoint == true, + isDraggingEndPoint: isDraggingStartPoint == false, + drawStartPointLabel: () { + if (startPoint != null) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: startPoint!.quote, + pipSize: chartConfig.pipSize, + animationProgress: animationInfo.stateChangePercent, + size: size, + textStyle: config.labelStyle, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + drawEndPointLabel: () { + if (endPoint != null && + startPoint != null && + endPoint!.quote != startPoint!.quote) { + drawValueLabel( + canvas: canvas, + quoteToY: quoteToY, + value: endPoint!.quote, + pipSize: chartConfig.pipSize, + animationProgress: animationInfo.stateChangePercent, + size: size, + textStyle: config.labelStyle, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + ); + // Paint X-axis labels when selected paintXAxisLabels( canvas, @@ -360,37 +371,47 @@ class TrendLineInteractableDrawing ChartTheme chartTheme, GetDrawingState getDrawingState, ) { - if (getDrawingState(this).contains(DrawingToolState.selected)) { - // Draw epoch label for start point - if (startPoint != null) { - drawEpochLabel( - canvas: canvas, - epochToX: epochToX, - epoch: startPoint!.epoch, - size: size, - textStyle: config.labelStyle, - animationProgress: animationInfo.stateChangePercent, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - - // Draw epoch label for end point (only if different from start point to avoid overlap) - if (endPoint != null && - startPoint != null && - endPoint!.epoch != startPoint!.epoch) { - drawEpochLabel( - canvas: canvas, - epochToX: epochToX, - epoch: endPoint!.epoch, - size: size, - textStyle: config.labelStyle, - animationProgress: animationInfo.stateChangePercent, - color: config.lineStyle.color, - backgroundColor: chartTheme.backgroundColor, - ); - } - } + drawLabelsWithZIndex( + canvas: canvas, + size: size, + animationInfo: animationInfo, + chartConfig: chartConfig, + chartTheme: chartTheme, + getDrawingState: getDrawingState, + drawing: this, + isDraggingStartPoint: isDraggingStartPoint == true, + isDraggingEndPoint: isDraggingStartPoint == false, + drawStartPointLabel: () { + if (startPoint != null) { + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: startPoint!.epoch, + size: size, + textStyle: config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + drawEndPointLabel: () { + if (endPoint != null && + startPoint != null && + endPoint!.epoch != startPoint!.epoch) { + drawEpochLabel( + canvas: canvas, + epochToX: epochToX, + epoch: endPoint!.epoch, + size: size, + textStyle: config.labelStyle, + animationProgress: animationInfo.stateChangePercent, + color: config.lineStyle.color, + backgroundColor: chartTheme.backgroundColor, + ); + } + }, + ); } @override From 45030a66ed27c78fba964203f72361760dd40f61 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 15 Jul 2025 13:47:54 +0800 Subject: [PATCH 301/311] style: fix formatting in trend line drawing tool - Add missing blank line for consistent code formatting --- .../trend_line/trend_line_interactable_drawing.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart index 535d81054..40c4426ed 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/trend_line/trend_line_interactable_drawing.dart @@ -346,7 +346,7 @@ class TrendLineInteractableDrawing } }, ); - + // Paint X-axis labels when selected paintXAxisLabels( canvas, From 09d6b65037b9f01e53614247a535259f9ef6394d Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 15 Jul 2025 15:09:02 +0800 Subject: [PATCH 302/311] feat: implement automated cache management for Fibonacci Fan drawing tool - Add automated paint and text painter cache management to prevent memory bloat - Implement size-based eviction (100 entries max) and time-based expiration (5 minutes) - Add cache wrapper classes with timestamp tracking for intelligent cleanup - Integrate configuration change detection for automatic cache invalidation - Add comprehensive cache management API with selective clearing methods - Ensure cached objects always reflect current styling and configuration - Maintain optimal drawing performance while preventing unbounded memory growth Addresses performance issue where caches were never cleared automatically, which could lead to memory bloat in long-lived chart applications. --- .../fibfan/fibfan_interactable_drawing.dart | 32 ++++ .../interactable_drawings/fibfan/helpers.dart | 181 ++++++++++++++++-- 2 files changed, 196 insertions(+), 17 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index e23afebbc..9202623d5 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -286,6 +286,10 @@ class FibfanInteractableDrawing final DrawingPaintStyle paintStyle = DrawingPaintStyle(); final drawingState = getDrawingState(this); + // Handle configuration changes for automatic cache management + final int configHash = _calculateConfigHash(); + FibonacciFanHelpers.handleConfigurationChange(configHash); + if (startPoint != null && endPoint != null) { final Offset startOffset = Offset( epochToX(startPoint!.epoch), @@ -766,4 +770,32 @@ class FibfanInteractableDrawing )); }, ); + + /// Calculates a hash of the current configuration for change detection. + /// + /// This method creates a hash based on the drawing configuration properties + /// that affect visual rendering. When the configuration changes, the hash + /// will change, triggering automatic cache management to ensure cached + /// paint objects reflect the latest styling. + /// + /// **Included Properties:** + /// - Line style (color, thickness) + /// - Fill style (color, thickness) + /// - Fibonacci level colors + /// - Label style (color, font size) + /// + /// **Returns:** Integer hash representing the current configuration state + int _calculateConfigHash() { + return Object.hash( + config.lineStyle.color.value, + config.lineStyle.thickness, + config.fillStyle.color.value, + config.fillStyle.thickness, + config.labelStyle.color?.value ?? 0, + config.labelStyle.fontSize, + config.fibonacciLevelColors.entries + .map((e) => Object.hash(e.key, e.value.value)) + .fold(0, (prev, hash) => prev ^ hash), + ); + } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index 407963f7d..ebabc7cac 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -5,6 +5,31 @@ import 'package:deriv_chart/src/theme/design_tokens/core_design_tokens.dart'; import 'package:deriv_chart/src/theme/painting_styles/line_style.dart'; import 'package:flutter/material.dart'; +/// Wrapper class for cached Paint objects with timestamp tracking. +class _CachedPaint { + _CachedPaint(this.paint) : lastUsed = DateTime.now().millisecondsSinceEpoch; + + final Paint paint; + int lastUsed; + + void updateLastUsed() { + lastUsed = DateTime.now().millisecondsSinceEpoch; + } +} + +/// Wrapper class for cached TextPainter objects with timestamp tracking. +class _CachedTextPainter { + _CachedTextPainter(this.textPainter) + : lastUsed = DateTime.now().millisecondsSinceEpoch; + + final TextPainter textPainter; + int lastUsed; + + void updateLastUsed() { + lastUsed = DateTime.now().millisecondsSinceEpoch; + } +} + /// Represents a single Fibonacci level with all its associated properties. /// /// This class encapsulates the ratio, label, and color key for each @@ -227,7 +252,17 @@ class FibfanConstants { /// **Performance Optimization:** /// This class implements paint object caching to improve rendering performance /// by reusing Paint objects instead of creating new ones for each draw operation. +/// The cache is automatically managed to prevent memory bloat through: +/// - Size-based eviction when cache exceeds maximum entries +/// - Time-based expiration for unused cache entries +/// - Configuration change detection for selective invalidation class FibonacciFanHelpers { + /// Maximum number of entries allowed in each cache before eviction occurs. + static const int _maxCacheSize = 100; + + /// Time in milliseconds after which unused cache entries expire. + static const int _cacheExpirationMs = 300000; // 5 minutes + /// Cache for line paint objects to improve performance. /// /// Maps paint configuration keys to reusable Paint objects. This prevents @@ -236,7 +271,8 @@ class FibonacciFanHelpers { /// frequent redraws. /// /// **Cache Key Format:** `"line_${color.value}_${thickness}"` - static final Map _linePaintCache = {}; + static final Map _linePaintCache = + {}; /// Cache for fill paint objects to improve performance. /// @@ -245,7 +281,8 @@ class FibonacciFanHelpers { /// fan lines, which can involve multiple fill operations per frame. /// /// **Cache Key Format:** `"fill_${color.value}_${thickness}"` - static final Map _fillPaintCache = {}; + static final Map _fillPaintCache = + {}; /// Cache for dash paint objects to improve performance. /// @@ -254,7 +291,8 @@ class FibonacciFanHelpers { /// frequently during user interactions. /// /// **Cache Key Format:** `"dash_${color.value}_${thickness}_${opacity}"` - static final Map _dashPaintCache = {}; + static final Map _dashPaintCache = + {}; /// Cache for text painter objects to improve label rendering performance. /// @@ -263,8 +301,11 @@ class FibonacciFanHelpers { /// repeatedly with the same styling. /// /// **Cache Key Format:** `"text_${text}_${color.value}_${fontSize}"` - static final Map _textPainterCache = - {}; + static final Map _textPainterCache = + {}; + + /// Tracks the last configuration hash to detect changes. + static int? _lastConfigHash; /// Gets or creates a cached line paint object. /// @@ -281,13 +322,16 @@ class FibonacciFanHelpers { /// **Performance Benefit:** Eliminates Paint object allocation overhead /// during frequent drawing operations, especially during animations. static Paint getCachedLinePaint(Color color, double thickness) { + _performAutomaticCacheManagement(); final String key = 'line_${color.value}_$thickness'; - return _linePaintCache.putIfAbsent( + final cachedPaint = _linePaintCache.putIfAbsent( key, - () => Paint() + () => _CachedPaint(Paint() ..color = color ..style = PaintingStyle.stroke - ..strokeWidth = thickness); + ..strokeWidth = thickness)) + ..updateLastUsed(); + return cachedPaint.paint; } /// Gets or creates a cached fill paint object. @@ -304,13 +348,16 @@ class FibonacciFanHelpers { /// **Performance Benefit:** Reduces memory allocation during fill operations, /// which can be frequent when drawing multiple fan fill areas. static Paint getCachedFillPaint(Color color, double thickness) { + _performAutomaticCacheManagement(); final String key = 'fill_${color.value}_$thickness'; - return _fillPaintCache.putIfAbsent( + final cachedPaint = _fillPaintCache.putIfAbsent( key, - () => Paint() + () => _CachedPaint(Paint() ..color = color ..style = PaintingStyle.fill - ..strokeWidth = thickness); + ..strokeWidth = thickness)) + ..updateLastUsed(); + return cachedPaint.paint; } /// Gets or creates a cached dash paint object. @@ -329,13 +376,16 @@ class FibonacciFanHelpers { /// dashed lines are drawn frequently during user interactions. static Paint getCachedDashPaint( Color color, double thickness, double opacity) { + _performAutomaticCacheManagement(); final String key = 'dash_${color.value}_${thickness}_$opacity'; - return _dashPaintCache.putIfAbsent( + final cachedPaint = _dashPaintCache.putIfAbsent( key, - () => Paint() + () => _CachedPaint(Paint() ..color = color.withOpacity(opacity) ..style = PaintingStyle.stroke - ..strokeWidth = thickness); + ..strokeWidth = thickness)) + ..updateLastUsed(); + return cachedPaint.paint; } /// Gets or creates a cached text painter object. @@ -356,8 +406,9 @@ class FibonacciFanHelpers { /// performance during animations and frequent redraws. static TextPainter getCachedTextPainter( String text, Color color, double fontSize) { + _performAutomaticCacheManagement(); final String key = 'text_${text}_${color.value}_$fontSize'; - return _textPainterCache.putIfAbsent(key, () { + final cachedTextPainter = _textPainterCache.putIfAbsent(key, () { final textPainter = TextPainter( text: TextSpan( text: text, @@ -369,8 +420,104 @@ class FibonacciFanHelpers { ), textDirection: TextDirection.ltr, )..layout(); - return textPainter; - }); + return _CachedTextPainter(textPainter); + }) + ..updateLastUsed(); + return cachedTextPainter.textPainter; + } + + /// Performs automatic cache management including size-based eviction and time-based expiration. + /// + /// This method is called automatically by cache getter methods to ensure + /// memory usage stays within acceptable bounds. It implements: + /// - Size-based eviction: Removes oldest entries when cache exceeds maximum size + /// - Time-based expiration: Removes entries that haven't been used recently + /// + /// **Performance Note:** This method is designed to be lightweight and only + /// performs cleanup when necessary to avoid impacting drawing performance. + static void _performAutomaticCacheManagement() { + final int currentTime = DateTime.now().millisecondsSinceEpoch; + + // Perform size-based eviction for each cache + _evictOldestEntries(_linePaintCache); + _evictOldestEntries(_fillPaintCache); + _evictOldestEntries(_dashPaintCache); + _evictOldestEntriesTextPainter(_textPainterCache); + + // Perform time-based expiration + _expireOldEntries(_linePaintCache, currentTime); + _expireOldEntries(_fillPaintCache, currentTime); + _expireOldEntries(_dashPaintCache, currentTime); + _expireOldEntriesTextPainter(_textPainterCache, currentTime); + } + + /// Evicts oldest entries from paint cache when size limit is exceeded. + static void _evictOldestEntries(Map cache) { + if (cache.length <= _maxCacheSize) { + return; + } + + final entries = cache.entries.toList() + ..sort((a, b) => a.value.lastUsed.compareTo(b.value.lastUsed)); + + final entriesToRemove = cache.length - _maxCacheSize; + for (int i = 0; i < entriesToRemove; i++) { + cache.remove(entries[i].key); + } + } + + /// Evicts oldest entries from text painter cache when size limit is exceeded. + static void _evictOldestEntriesTextPainter( + Map cache) { + if (cache.length <= _maxCacheSize) { + return; + } + + final entries = cache.entries.toList() + ..sort((a, b) => a.value.lastUsed.compareTo(b.value.lastUsed)); + + final entriesToRemove = cache.length - _maxCacheSize; + for (int i = 0; i < entriesToRemove; i++) { + cache.remove(entries[i].key); + } + } + + /// Removes expired entries from paint cache based on time threshold. + static void _expireOldEntries( + Map cache, int currentTime) { + cache.removeWhere( + (key, value) => currentTime - value.lastUsed > _cacheExpirationMs); + } + + /// Removes expired entries from text painter cache based on time threshold. + static void _expireOldEntriesTextPainter( + Map cache, int currentTime) { + cache.removeWhere( + (key, value) => currentTime - value.lastUsed > _cacheExpirationMs); + } + + /// Detects configuration changes and clears relevant cache entries. + /// + /// This method should be called when drawing configuration changes to ensure + /// cached objects reflect the latest styling. It compares the current + /// configuration hash with the previous one and performs selective cache + /// invalidation when changes are detected. + /// + /// **Parameters:** + /// - [configHash]: Hash of the current configuration + /// + /// **Use Cases:** + /// - Theme changes that affect colors or styling + /// - User customization of drawing properties + /// - Dynamic style updates during runtime + static void handleConfigurationChange(int configHash) { + if (_lastConfigHash != null && _lastConfigHash != configHash) { + // Configuration has changed, perform selective cache clearing + // For now, clear all caches to ensure consistency + // In the future, this could be made more granular based on what changed + clearPaintCaches(); + } + _lastConfigHash = configHash; } /// Clears all paint and text painter caches. From 5ceb836f61c3e4ffe2a72f17ddcedc985f321e47 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 15 Jul 2025 15:14:04 +0800 Subject: [PATCH 303/311] Fix generic type constraint in drawLabelsWithZIndex function - Add import for DrawingToolConfig - Add 'T extends DrawingToolConfig' constraint to generic type parameter - Resolves Dart error: 'T' doesn't conform to the bound 'DrawingToolConfig' --- .../interactive_layer/helpers/paint_helpers.dart | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 295c7c15e..7977c7adb 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -1,10 +1,12 @@ 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'; @@ -340,14 +342,14 @@ void drawEpochLabel({ /// **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({ +void drawLabelsWithZIndex({ required Canvas canvas, required Size size, required AnimationInfo animationInfo, required ChartConfig chartConfig, required ChartTheme chartTheme, required GetDrawingState getDrawingState, - required dynamic drawing, + required InteractableDrawing drawing, required void Function() drawStartPointLabel, required void Function() drawEndPointLabel, required bool isDraggingStartPoint, From 5b90b9910a2388aabff21376077839bb63f660d4 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Tue, 15 Jul 2025 15:24:52 +0800 Subject: [PATCH 304/311] fix: enhance TextPainter cache key to include font family and weight - Add optional fontWeight and fontFamily parameters to getCachedTextPainter method - Update cache key format to include font weight index and font family - Prevent incorrect text rendering when different font families or weights are used - Add new cache clearing methods for font weight and font family - Maintain backward compatibility with existing code - Addresses sourcery-ai bug risk about incomplete cache key This fixes the issue where TextPainter cache key did not account for font family or weight beyond hardcoded w500, which could cause incorrect rendering when labelStyle uses different font properties. --- .../interactable_drawings/fibfan/helpers.dart | 59 +++++++++++++++++-- 1 file changed, 54 insertions(+), 5 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index ebabc7cac..924f2345a 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -300,7 +300,7 @@ class FibonacciFanHelpers { /// especially beneficial for Fibonacci level labels which are drawn /// repeatedly with the same styling. /// - /// **Cache Key Format:** `"text_${text}_${color.value}_${fontSize}"` + /// **Cache Key Format:** `"text_${text}_${color.value}_${fontSize}_${fontWeight.index}_${fontFamily}"` static final Map _textPainterCache = {}; @@ -405,9 +405,16 @@ class FibonacciFanHelpers { /// overhead for repeated label rendering, significantly improving /// performance during animations and frequent redraws. static TextPainter getCachedTextPainter( - String text, Color color, double fontSize) { + String text, Color color, double fontSize, + {FontWeight? fontWeight, String? fontFamily}) { _performAutomaticCacheManagement(); - final String key = 'text_${text}_${color.value}_$fontSize'; + + // Include font weight and family in cache key to prevent incorrect rendering + final FontWeight effectiveFontWeight = fontWeight ?? FontWeight.w500; + final String effectiveFontFamily = fontFamily ?? ''; + final String key = + 'text_${text}_${color.value}_${fontSize}_${effectiveFontWeight.index}_$effectiveFontFamily'; + final cachedTextPainter = _textPainterCache.putIfAbsent(key, () { final textPainter = TextPainter( text: TextSpan( @@ -415,7 +422,8 @@ class FibonacciFanHelpers { style: TextStyle( color: color, fontSize: fontSize, - fontWeight: FontWeight.w500, + fontWeight: effectiveFontWeight, + fontFamily: fontFamily, ), ), textDirection: TextDirection.ltr, @@ -596,7 +604,48 @@ class FibonacciFanHelpers { /// **Performance Benefit:** Preserves text painters with other font sizes, /// maintaining cache efficiency for unaffected configurations. static void clearTextPainterCacheForFontSize(double fontSize) { - _textPainterCache.removeWhere((key, _) => key.endsWith('_$fontSize')); + _textPainterCache.removeWhere((key, _) => key.contains('_${fontSize}_')); + } + + /// Clears text painter cache entries for a specific font weight. + /// + /// Provides targeted cache invalidation when font weight preferences + /// change. This is more efficient than clearing the entire cache + /// when only font weight has been modified. + /// + /// **Parameters:** + /// - [fontWeight]: The font weight for which to clear cached text painters + /// + /// **Use Cases:** + /// - User font weight preference changes + /// - Theme updates affecting text weight + /// - Dynamic font weight adjustments + /// + /// **Performance Benefit:** Preserves text painters with other font weights, + /// maintaining cache efficiency for unaffected configurations. + static void clearTextPainterCacheForFontWeight(FontWeight fontWeight) { + _textPainterCache + .removeWhere((key, _) => key.contains('_${fontWeight.index}_')); + } + + /// Clears text painter cache entries for a specific font family. + /// + /// Provides targeted cache invalidation when font family preferences + /// change. This is more efficient than clearing the entire cache + /// when only font family has been modified. + /// + /// **Parameters:** + /// - [fontFamily]: The font family for which to clear cached text painters + /// + /// **Use Cases:** + /// - User font family preference changes + /// - Theme updates affecting font family + /// - Dynamic font family adjustments + /// + /// **Performance Benefit:** Preserves text painters with other font families, + /// maintaining cache efficiency for unaffected configurations. + static void clearTextPainterCacheForFontFamily(String fontFamily) { + _textPainterCache.removeWhere((key, _) => key.endsWith('_$fontFamily')); } /// Clears only paint object caches, preserving text painter cache. From 970d7b6ff28256bd08af305fe19cf429a15d2b16 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 17 Jul 2025 11:18:49 +0800 Subject: [PATCH 305/311] feat: make fibfan edge points use same color as top/bottom lines - Updated edge point rendering to use level0 color (same as level100) - Simplified color logic by using single edgePointColor variable - Applied changes to main drawing, desktop preview, and mobile preview - Ensures visual consistency between edge points and fibonacci lines --- .../fibfan/fibfan_adding_preview_desktop.dart | 20 ++++++++++++++++--- .../fibfan/fibfan_adding_preview_mobile.dart | 12 +++++++++-- .../fibfan/fibfan_interactable_drawing.dart | 20 +++++++++++++++---- 3 files changed, 43 insertions(+), 9 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index a9be1b936..3f6c8702f 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -112,6 +112,13 @@ class FibfanAddingPreviewDesktop drawPointAlignmentGuides(canvas, size, pointOffset, lineColor: interactableDrawing.config.lineStyle.color); + // Use the same color for edge points (from level0 which matches level100) + final Color edgePointColor = + interactableDrawing.config.fibonacciLevelColors['level0'] ?? + interactableDrawing.config.lineStyle.color; + final LineStyle edgePointLineStyle = + interactableDrawing.config.lineStyle.copyWith(color: edgePointColor); + // Draw preview point at hover position drawPointOffset( pointOffset, @@ -119,7 +126,7 @@ class FibfanAddingPreviewDesktop quoteToY, canvas, paintStyle, - interactableDrawing.config.lineStyle, + edgePointLineStyle, radius: FibfanConstants.pointRadius, ); } @@ -157,6 +164,13 @@ class FibfanAddingPreviewDesktop fibonacciLevelColors: interactableDrawing.config.fibonacciLevelColors); + // Use the same color for edge points (from level0 which matches level100) + final Color edgePointColor = + interactableDrawing.config.fibonacciLevelColors['level0'] ?? + interactableDrawing.config.lineStyle.color; + final LineStyle edgePointLineStyle = + interactableDrawing.config.lineStyle.copyWith(color: edgePointColor); + // Draw the control points // Draw start point (already placed) drawPointOffset( @@ -165,7 +179,7 @@ class FibfanAddingPreviewDesktop quoteToY, canvas, paintStyle, - interactableDrawing.config.lineStyle, + edgePointLineStyle, radius: FibfanConstants.pointRadius, ); @@ -180,7 +194,7 @@ class FibfanAddingPreviewDesktop quoteToY, canvas, paintStyle, - interactableDrawing.config.lineStyle, + edgePointLineStyle, radius: FibfanConstants.pointRadius, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index f6da7ae53..7d8934ca4 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -8,6 +8,7 @@ import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/anim import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/paint_helpers.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/gestures.dart'; import '../../helpers/types.dart'; @@ -195,6 +196,13 @@ class FibfanAddingPreviewMobile _drawPreviewFanLines(canvas, startOffset, deltaX, deltaY, size); } + // Use the same color for edge points (from level0 which matches level100) + final Color edgePointColor = + interactableDrawing.config.fibonacciLevelColors['level0'] ?? + interactableDrawing.config.lineStyle.color; + final LineStyle edgePointLineStyle = + interactableDrawing.config.lineStyle.copyWith(color: edgePointColor); + // Draw edge points for the preview final DrawingPaintStyle paintStyle = DrawingPaintStyle(); drawPointOffset( @@ -203,7 +211,7 @@ class FibfanAddingPreviewMobile quoteToY, canvas, paintStyle, - interactableDrawing.config.lineStyle, + edgePointLineStyle, radius: FibfanConstants.pointRadius, ); drawPointOffset( @@ -212,7 +220,7 @@ class FibfanAddingPreviewMobile quoteToY, canvas, paintStyle, - interactableDrawing.config.lineStyle, + edgePointLineStyle, radius: FibfanConstants.pointRadius, ); diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 9202623d5..eb8be216d 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -323,6 +323,12 @@ class FibfanInteractableDrawing // Draw endpoints with appropriate visual feedback based on interaction state if (drawingState.contains(DrawingToolState.selected) || drawingState.contains(DrawingToolState.dragging)) { + // Use the same color for both edge points (from level0 which matches level100) + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; + final LineStyle edgePointLineStyle = + config.lineStyle.copyWith(color: edgePointColor); + // Handle individual point dragging with differentiated visual feedback if (drawingState.contains(DrawingToolState.dragging) && (_dragState == FibfanDragState.draggingStartPoint || @@ -331,7 +337,7 @@ class FibfanInteractableDrawing // This provides clear visual feedback about which point is actively being manipulated drawFocusedCircle( paintStyle, - lineStyle, + edgePointLineStyle, canvas, _dragState == FibfanDragState.draggingStartPoint ? startOffset @@ -353,7 +359,7 @@ class FibfanInteractableDrawing quoteToY, canvas, paintStyle, - config.lineStyle, + edgePointLineStyle, radius: FibfanConstants.pointRadius, ); } else { @@ -361,7 +367,7 @@ class FibfanInteractableDrawing // show focused circles on both points for general selection feedback drawPointsFocusedCircle( paintStyle, - lineStyle, + edgePointLineStyle, canvas, startOffset, FibfanConstants.focusedCircleRadius * @@ -372,9 +378,15 @@ class FibfanInteractableDrawing ); } } else if (drawingState.contains(DrawingToolState.hovered)) { + // Use the same color for both edge points (from level0 which matches level100) + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; + final LineStyle edgePointLineStyle = + config.lineStyle.copyWith(color: edgePointColor); + drawPointsFocusedCircle( paintStyle, - lineStyle, + edgePointLineStyle, canvas, startOffset, FibfanConstants.focusedCircleRadius, From cf8ceaa816ac3bb9c5d90a3f2c6341fff1b44ed2 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 17 Jul 2025 11:28:07 +0800 Subject: [PATCH 306/311] feat: update fibfan alignment guides to use same color as edge points - Updated drawPointAlignmentGuides calls to use level0 color (same as edge points) - Applied changes to main drawing, desktop preview, and mobile preview - Ensures visual consistency between alignment guides and fibonacci lines - Alignment guides now match the top/bottom line colors for better coherence --- .../fibfan/fibfan_adding_preview_desktop.dart | 15 ++++++--------- .../fibfan/fibfan_adding_preview_mobile.dart | 7 +++++-- .../fibfan/fibfan_interactable_drawing.dart | 15 ++++++++++----- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index 3f6c8702f..f965a2d6b 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -109,15 +109,12 @@ class FibfanAddingPreviewDesktop _hoverPosition!.dx, _hoverPosition!.dy, ); - drawPointAlignmentGuides(canvas, size, pointOffset, - lineColor: interactableDrawing.config.lineStyle.color); - // Use the same color for edge points (from level0 which matches level100) - final Color edgePointColor = - interactableDrawing.config.fibonacciLevelColors['level0'] ?? - interactableDrawing.config.lineStyle.color; - final LineStyle edgePointLineStyle = - interactableDrawing.config.lineStyle.copyWith(color: edgePointColor); + final Color edgePointColor = interactableDrawing.config.fibonacciLevelColors['level0'] ?? interactableDrawing.config.lineStyle.color; + final LineStyle edgePointLineStyle = interactableDrawing.config.lineStyle.copyWith(color: edgePointColor); + + drawPointAlignmentGuides(canvas, size, pointOffset, + lineColor: edgePointColor); // Draw preview point at hover position drawPointOffset( @@ -199,7 +196,7 @@ class FibfanAddingPreviewDesktop ); drawPointAlignmentGuides(canvas, size, endPointOffset, - lineColor: interactableDrawing.config.lineStyle.color); + lineColor: edgePointColor); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index 7d8934ca4..ba43cc365 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -226,17 +226,20 @@ class FibfanAddingPreviewMobile // Draw alignment guides on each edge point when dragging if (_isDragging) { + // Use the same color for alignment guides as edge points + final Color edgePointColor = interactableDrawing.config.fibonacciLevelColors['level0'] ?? interactableDrawing.config.lineStyle.color; + drawPointAlignmentGuides( canvas, size, startOffset, - lineColor: interactableDrawing.config.lineStyle.color, + lineColor: edgePointColor, ); drawPointAlignmentGuides( canvas, size, endOffset, - lineColor: interactableDrawing.config.lineStyle.color, + lineColor: edgePointColor, ); } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index eb8be216d..95be319d0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -396,20 +396,23 @@ class FibfanInteractableDrawing // Draw alignment guides when dragging if (drawingState.contains(DrawingToolState.dragging)) { + // Use the same color for alignment guides as edge points + final Color edgePointColor = config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; + switch (_dragState) { case FibfanDragState.draggingStartPoint: drawPointAlignmentGuides(canvas, size, startOffset, - lineColor: config.lineStyle.color); + lineColor: edgePointColor); break; case FibfanDragState.draggingEndPoint: drawPointAlignmentGuides(canvas, size, endOffset, - lineColor: config.lineStyle.color); + lineColor: edgePointColor); break; case FibfanDragState.draggingEntireFan: drawPointAlignmentGuides(canvas, size, startOffset, - lineColor: config.lineStyle.color); + lineColor: edgePointColor); drawPointAlignmentGuides(canvas, size, endOffset, - lineColor: config.lineStyle.color); + lineColor: edgePointColor); break; case null: // No specific drag state, don't draw alignment guides @@ -456,8 +459,10 @@ class FibfanInteractableDrawing radius: FibfanConstants.pointRadius, ); + // Use the same color for alignment guides as edge points + final Color edgePointColor = config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; drawPointAlignmentGuides(canvas, size, startOffset, - lineColor: config.lineStyle.color); + lineColor: edgePointColor); } } From 29d1120d745252101f5f004c3b5bdc514f196ac1 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 17 Jul 2025 11:36:53 +0800 Subject: [PATCH 307/311] feat: update fibfan value and epoch labels to use same color as edge points - Updated drawValueLabel and drawEpochLabel calls to use level0 color (same as edge points) - Applied changes to main drawing, desktop preview, and mobile preview - Ensures complete visual consistency across all fibfan UI elements - All labels (value, epoch, alignment guides) now match the top/bottom line colors --- .../fibfan/fibfan_adding_preview_desktop.dart | 18 ++++++++---- .../fibfan/fibfan_adding_preview_mobile.dart | 19 +++++++++---- .../fibfan/fibfan_interactable_drawing.dart | 28 ++++++++++++++----- 3 files changed, 47 insertions(+), 18 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart index f965a2d6b..85c6bd8b0 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_desktop.dart @@ -110,9 +110,12 @@ class FibfanAddingPreviewDesktop _hoverPosition!.dy, ); // Use the same color for edge points (from level0 which matches level100) - final Color edgePointColor = interactableDrawing.config.fibonacciLevelColors['level0'] ?? interactableDrawing.config.lineStyle.color; - final LineStyle edgePointLineStyle = interactableDrawing.config.lineStyle.copyWith(color: edgePointColor); - + final Color edgePointColor = + interactableDrawing.config.fibonacciLevelColors['level0'] ?? + interactableDrawing.config.lineStyle.color; + final LineStyle edgePointLineStyle = + interactableDrawing.config.lineStyle.copyWith(color: edgePointColor); + drawPointAlignmentGuides(canvas, size, pointOffset, lineColor: edgePointColor); @@ -214,6 +217,11 @@ class FibfanAddingPreviewDesktop GetDrawingState getDrawingState, ) { if (_hoverPosition != null) { + // Use the same color for labels as edge points + final Color edgePointColor = + interactableDrawing.config.fibonacciLevelColors['level0'] ?? + interactableDrawing.config.lineStyle.color; + drawValueLabel( canvas: canvas, quoteToY: quoteToY, @@ -221,7 +229,7 @@ class FibfanAddingPreviewDesktop .quoteFromY(_hoverPosition!.dy), pipSize: chartConfig.pipSize, size: size, - color: interactableDrawing.config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, textStyle: interactableDrawing.config.labelStyle, ); @@ -233,7 +241,7 @@ class FibfanAddingPreviewDesktop size: size, textStyle: interactableDrawing.config.labelStyle, animationProgress: animationInfo.stateChangePercent, - color: interactableDrawing.config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart index ba43cc365..94af6d049 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_adding_preview_mobile.dart @@ -227,8 +227,10 @@ class FibfanAddingPreviewMobile // Draw alignment guides on each edge point when dragging if (_isDragging) { // Use the same color for alignment guides as edge points - final Color edgePointColor = interactableDrawing.config.fibonacciLevelColors['level0'] ?? interactableDrawing.config.lineStyle.color; - + final Color edgePointColor = + interactableDrawing.config.fibonacciLevelColors['level0'] ?? + interactableDrawing.config.lineStyle.color; + drawPointAlignmentGuides( canvas, size, @@ -342,6 +344,11 @@ class FibfanAddingPreviewMobile if (_isDragging && interactableDrawing.startPoint != null && interactableDrawing.endPoint != null) { + // Use the same color for labels as edge points + final Color edgePointColor = + interactableDrawing.config.fibonacciLevelColors['level0'] ?? + interactableDrawing.config.lineStyle.color; + // Draw labels for start point drawValueLabel( canvas: canvas, @@ -349,7 +356,7 @@ class FibfanAddingPreviewMobile value: interactableDrawing.startPoint!.quote, pipSize: chartConfig.pipSize, size: size, - color: interactableDrawing.config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, textStyle: interactableDrawing.config.labelStyle, ); @@ -360,7 +367,7 @@ class FibfanAddingPreviewMobile size: size, textStyle: interactableDrawing.config.labelStyle, animationProgress: animationInfo.stateChangePercent, - color: interactableDrawing.config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, ); @@ -371,7 +378,7 @@ class FibfanAddingPreviewMobile value: interactableDrawing.endPoint!.quote, pipSize: chartConfig.pipSize, size: size, - color: interactableDrawing.config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, textStyle: interactableDrawing.config.labelStyle, ); @@ -382,7 +389,7 @@ class FibfanAddingPreviewMobile size: size, textStyle: interactableDrawing.config.labelStyle, animationProgress: animationInfo.stateChangePercent, - color: interactableDrawing.config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, ); } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 95be319d0..2e51758a1 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -397,8 +397,9 @@ class FibfanInteractableDrawing // Draw alignment guides when dragging if (drawingState.contains(DrawingToolState.dragging)) { // Use the same color for alignment guides as edge points - final Color edgePointColor = config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; - + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; + switch (_dragState) { case FibfanDragState.draggingStartPoint: drawPointAlignmentGuides(canvas, size, startOffset, @@ -460,7 +461,8 @@ class FibfanInteractableDrawing ); // Use the same color for alignment guides as edge points - final Color edgePointColor = config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; drawPointAlignmentGuides(canvas, size, startOffset, lineColor: edgePointColor); } @@ -491,6 +493,9 @@ class FibfanInteractableDrawing isDraggingEndPoint: _dragState == FibfanDragState.draggingEndPoint, drawStartPointLabel: () { if (startPoint != null) { + // Use the same color for labels as edge points + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; drawValueLabel( canvas: canvas, quoteToY: quoteToY, @@ -499,7 +504,7 @@ class FibfanInteractableDrawing animationProgress: animationInfo.stateChangePercent, size: size, textStyle: config.labelStyle, - color: config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, ); } @@ -508,6 +513,9 @@ class FibfanInteractableDrawing if (endPoint != null && startPoint != null && endPoint!.quote != startPoint!.quote) { + // Use the same color for labels as edge points + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; drawValueLabel( canvas: canvas, quoteToY: quoteToY, @@ -516,7 +524,7 @@ class FibfanInteractableDrawing animationProgress: animationInfo.stateChangePercent, size: size, textStyle: config.labelStyle, - color: config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, ); } @@ -558,6 +566,9 @@ class FibfanInteractableDrawing isDraggingEndPoint: _dragState == FibfanDragState.draggingEndPoint, drawStartPointLabel: () { if (startPoint != null) { + // Use the same color for labels as edge points + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; drawEpochLabel( canvas: canvas, epochToX: epochToX, @@ -565,7 +576,7 @@ class FibfanInteractableDrawing size: size, textStyle: config.labelStyle, animationProgress: animationInfo.stateChangePercent, - color: config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, ); } @@ -574,6 +585,9 @@ class FibfanInteractableDrawing if (endPoint != null && startPoint != null && endPoint!.epoch != startPoint!.epoch) { + // Use the same color for labels as edge points + final Color edgePointColor = + config.fibonacciLevelColors['level0'] ?? config.lineStyle.color; drawEpochLabel( canvas: canvas, epochToX: epochToX, @@ -581,7 +595,7 @@ class FibfanInteractableDrawing size: size, textStyle: config.labelStyle, animationProgress: animationInfo.stateChangePercent, - color: config.lineStyle.color, + color: edgePointColor, backgroundColor: chartTheme.backgroundColor, ); } From 5c604b3e2aac7d0ba6d2bf2093fd7faaba9422d2 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 17 Jul 2025 11:46:41 +0800 Subject: [PATCH 308/311] Fix label text colors to match border colors in drawEpochLabel and drawValueLabel - Updated drawEpochLabel to use color parameter for text instead of textStyle.color - Updated drawValueLabel to use color parameter for text instead of textStyle.color - Ensures consistent visual appearance where text and border colors are synchronized --- .../deriv_chart/interactive_layer/helpers/paint_helpers.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart index 7977c7adb..30305e01c 100644 --- a/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/helpers/paint_helpers.dart @@ -197,7 +197,7 @@ void drawValueLabel({ final TextPainter textPainter = _getTextPainter( formattedValue, textStyle: textStyle.copyWith( - color: textStyle.color?.withOpacity(animationProgress), + color: color.withOpacity(animationProgress), ), )..layout(); @@ -278,7 +278,7 @@ void drawEpochLabel({ final TextPainter textPainter = _getTextPainter( formattedTime, textStyle: textStyle.copyWith( - color: textStyle.color?.withOpacity(animationProgress), + color: color.withOpacity(animationProgress), ), )..layout(); From 0538d4e576fa3483ce122c19efac9a4979810dac Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 17 Jul 2025 13:55:50 +0800 Subject: [PATCH 309/311] feat: implement crosshair visibility logic for drawing tool selection - Hide crosshair when hovering over a selected drawing tool - Show crosshair when hovering over non-selected drawing tools or empty space - Maintain normal crosshair behavior in all other scenarios - Use existing _findHoveredDrawing method for hit detection --- .../interactive_layer/interactive_layer.dart | 77 +++++++++++++++++-- 1 file changed, 70 insertions(+), 7 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart index 024b09c59..24cd461d7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactive_layer.dart +++ b/lib/src/deriv_chart/interactive_layer/interactive_layer.dart @@ -13,6 +13,7 @@ import 'package:deriv_chart/src/deriv_chart/interactive_layer/crosshair/crosshai import 'package:deriv_chart/src/deriv_chart/interactive_layer/drawing_context.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/drawing_tool_gesture_recognizer.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/helpers/types.dart'; +import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_adding_tool_state.dart'; import 'package:deriv_chart/src/deriv_chart/interactive_layer/interactive_layer_states/interactive_selected_tool_state.dart'; import 'package:deriv_chart/src/models/axis_range.dart'; import 'package:deriv_chart/src/models/chart_config.dart'; @@ -754,16 +755,78 @@ class _InteractiveLayerGestureHandlerState layerConsumingHover ? InteractionMode.drawingTool : InteractionMode.none, ); - // For small screen variant, we don't show the crosshair on hover, as well as if we're in adding tool state - if (widget.crosshairVariant == CrosshairVariant.smallScreen || - layerConsumingHover) { - // InteractiveLayer is consuming the hover, we should not let the - // crosshair controller handle it + // Check if we should show crosshair based on drawing tool selection and hover state + final bool shouldShowCrosshair = + _shouldShowCrosshairOnHover(event.localPosition, layerConsumingHover); + + // For small screen variant, we don't show the crosshair on hover + if (widget.crosshairVariant == CrosshairVariant.smallScreen) { return; } - // Otherwise, let the crosshair controller handle the hover - widget.crosshairController.onHover(event); + // Show or hide crosshair based on the logic + if (shouldShowCrosshair) { + widget.crosshairController.onHover(event); + } else { + // Hide crosshair if it shouldn't be shown + widget.crosshairController.onExit(const PointerExitEvent()); + } + } + + /// Determines whether the crosshair should be shown based on drawing tool selection and hover state. + /// + /// The logic is: + /// - If a drawing tool is selected and the mouse is hovering over it, don't show crosshair + /// - If a drawing tool is not selected and the mouse hovers over it, show crosshair + /// - If no drawing tool is being hovered over, show crosshair (normal behavior) + bool _shouldShowCrosshairOnHover( + Offset localPosition, bool layerConsumingHover) { + final currentState = widget.interactiveLayerBehaviour.currentState; + + // If we're in adding tool state, don't show crosshair + if (currentState is InteractiveAddingToolState) { + return false; + } + + // If we're in selected tool state, only hide crosshair when hovering over the selected tool + if (currentState is InteractiveSelectedToolState) { + // Find which drawing we're hovering over + final InteractableDrawing? hoveredDrawing = + _findHoveredDrawing(localPosition); + + if (hoveredDrawing != null && + hoveredDrawing.id == currentState.selected.id) { + // Only hide crosshair if we're hovering over the selected tool + return false; + } + // For all other cases (hovering over different tool or empty space), show crosshair + return true; + } + + // For normal state, show crosshair + return true; + } + + /// Finds the drawing that is currently being hovered over. + InteractableDrawing? _findHoveredDrawing( + Offset localPosition) { + // Check regular drawings + for (final drawing in widget.drawings) { + if (drawing.hitTest(localPosition, epochToX, quoteToY)) { + return drawing; + } + } + + // Check preview drawings + for (final drawing in widget.interactiveLayerBehaviour.previewDrawings) { + if (drawing.hitTest(localPosition, epochToX, quoteToY)) { + // Preview drawings don't have the same interface, so we return null + // This is fine since preview drawings are temporary and shouldn't affect crosshair logic + return null; + } + } + + return null; } /// Determines the appropriate cursor based on the mouse position and interaction mode From 71bb8819a6b79cae625d7c15801fbc5042fc8642 Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 17 Jul 2025 14:44:54 +0800 Subject: [PATCH 310/311] feat: make entire fibfan area draggable using fan fill logic - Rewrite _hitTestFanArea to use exact same calculations as drawFanFills - Add _isPointInTriangle method using barycentric coordinates for precise hit testing - Test each triangular fill area between adjacent fan lines (0%-38.2%, 38.2%-50%, etc.) - Ensure perfect coverage of all visible fan areas including upper regions - Maintain existing endpoint and fan line hit testing for precise interactions - Fix issue where parts of the fan (especially upper areas) were not draggable --- .../fibfan/fibfan_interactable_drawing.dart | 100 +++++++++++++++++- 1 file changed, 99 insertions(+), 1 deletion(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 2e51758a1..559b9cee7 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -166,6 +166,12 @@ class FibfanInteractableDrawing _dragState = FibfanDragState.draggingEntireFan; return; } + + // Check if the drag is anywhere within the fan area + if (_hitTestFanArea(details.localPosition, epochToX, quoteToY)) { + _dragState = FibfanDragState.draggingEntireFan; + return; + } } @override @@ -200,7 +206,12 @@ class FibfanInteractableDrawing } // Check if the pointer is near any of the fan lines - return _hitTestFanLines(offset, epochToX, quoteToY); + if (_hitTestFanLines(offset, epochToX, quoteToY)) { + return true; + } + + // Check if the pointer is within the fan area (between the fan lines) + return _hitTestFanArea(offset, epochToX, quoteToY); } /// Helper method to test if a point hits any of the fan lines using angle-based calculations @@ -270,6 +281,93 @@ class FibfanInteractableDrawing return false; } + /// Helper method to test if a point is within the fan area (between the fan lines) + /// Uses the same logic as drawFanFills to ensure perfect coverage + bool _hitTestFanArea(Offset offset, EpochToX epochToX, QuoteToY quoteToY) { + if (startPoint == null || endPoint == null) { + return false; + } + + final Offset startOffset = Offset( + epochToX(startPoint!.epoch), + quoteToY(startPoint!.quote), + ); + final Offset endOffset = Offset( + epochToX(endPoint!.epoch), + quoteToY(endPoint!.quote), + ); + + // Calculate the base vector and angle (same as drawFanFills) + final double deltaX = endOffset.dx - startOffset.dx; + final double deltaY = endOffset.dy - startOffset.dy; + final double baseAngle = math.atan2(deltaY, deltaX); + + // Check if the point is within any of the triangular fill areas + // This uses the exact same logic as drawFanFills + for (int i = 0; i < FibonacciFanHelpers.fibonacciLevels.length - 1; i++) { + final double ratio1 = FibonacciFanHelpers.fibonacciLevels[i].ratio; + final double ratio2 = FibonacciFanHelpers.fibonacciLevels[i + 1].ratio; + + // Calculate angles: 0% should point to end point, 100% should be horizontal (0 degrees) + // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) + const double horizontalAngle = 0; // Horizontal reference + final double angle1 = baseAngle + (horizontalAngle - baseAngle) * ratio1; + final double angle2 = baseAngle + (horizontalAngle - baseAngle) * ratio2; + + // Extend lines to the edge of the screen using angle-based calculations + final double screenWidth = drawingContext.contentSize.width; + final double distanceToEdge = screenWidth - startOffset.dx; + + // Calculate extended points using trigonometry (same as drawFanFills) + final Offset extendedPoint1 = Offset( + screenWidth, + startOffset.dy + distanceToEdge * math.tan(angle1), + ); + final Offset extendedPoint2 = Offset( + screenWidth, + startOffset.dy + distanceToEdge * math.tan(angle2), + ); + + // Validate coordinates before testing (same as drawFanFills) + if (FibonacciFanHelpers.areCoordinatesValid( + [startOffset, extendedPoint1, extendedPoint2])) { + // Test if the point is inside this triangular area + if (_isPointInTriangle( + offset, startOffset, extendedPoint1, extendedPoint2)) { + return true; + } + } + } + + return false; + } + + /// Helper method to test if a point is inside a triangle using barycentric coordinates + bool _isPointInTriangle(Offset point, Offset a, Offset b, Offset c) { + // Calculate vectors + final double v0x = c.dx - a.dx; + final double v0y = c.dy - a.dy; + final double v1x = b.dx - a.dx; + final double v1y = b.dy - a.dy; + final double v2x = point.dx - a.dx; + final double v2y = point.dy - a.dy; + + // Calculate dot products + final double dot00 = v0x * v0x + v0y * v0y; + final double dot01 = v0x * v1x + v0y * v1y; + final double dot02 = v0x * v2x + v0y * v2y; + final double dot11 = v1x * v1x + v1y * v1y; + final double dot12 = v1x * v2x + v1y * v2y; + + // Calculate barycentric coordinates + final double invDenom = 1 / (dot00 * dot11 - dot01 * dot01); + final double u = (dot11 * dot02 - dot01 * dot12) * invDenom; + final double v = (dot00 * dot12 - dot01 * dot02) * invDenom; + + // Check if point is in triangle + return (u >= 0) && (v >= 0) && (u + v <= 1); + } + @override void paint( Canvas canvas, From f8ed6aa8091c72526fb573306ed850ccbe5f12de Mon Sep 17 00:00:00 2001 From: Jim Daniels Wasswa Date: Thu, 17 Jul 2025 15:01:51 +0800 Subject: [PATCH 311/311] refactor: consolidate fibfan hit testing and drawing logic - Add calculateFanAreaPolygons() method to helpers for shared polygon calculations - Update drawFanFills() to use shared calculation method - Update _hitTestFanArea() to use shared calculation method - Eliminates code duplication between hit testing and drawing operations - Ensures perfect consistency between visual fan areas and hit testing - Improves maintainability by centralizing geometric calculations --- .../fibfan/fibfan_interactable_drawing.dart | 47 ++---- .../interactable_drawings/fibfan/helpers.dart | 145 +++++++++++------- 2 files changed, 105 insertions(+), 87 deletions(-) diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart index 559b9cee7..9bf8275f3 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/fibfan_interactable_drawing.dart @@ -297,45 +297,22 @@ class FibfanInteractableDrawing quoteToY(endPoint!.quote), ); - // Calculate the base vector and angle (same as drawFanFills) final double deltaX = endOffset.dx - startOffset.dx; final double deltaY = endOffset.dy - startOffset.dy; - final double baseAngle = math.atan2(deltaY, deltaX); - - // Check if the point is within any of the triangular fill areas - // This uses the exact same logic as drawFanFills - for (int i = 0; i < FibonacciFanHelpers.fibonacciLevels.length - 1; i++) { - final double ratio1 = FibonacciFanHelpers.fibonacciLevels[i].ratio; - final double ratio2 = FibonacciFanHelpers.fibonacciLevels[i + 1].ratio; - - // Calculate angles: 0% should point to end point, 100% should be horizontal (0 degrees) - // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) - const double horizontalAngle = 0; // Horizontal reference - final double angle1 = baseAngle + (horizontalAngle - baseAngle) * ratio1; - final double angle2 = baseAngle + (horizontalAngle - baseAngle) * ratio2; - - // Extend lines to the edge of the screen using angle-based calculations - final double screenWidth = drawingContext.contentSize.width; - final double distanceToEdge = screenWidth - startOffset.dx; - // Calculate extended points using trigonometry (same as drawFanFills) - final Offset extendedPoint1 = Offset( - screenWidth, - startOffset.dy + distanceToEdge * math.tan(angle1), - ); - final Offset extendedPoint2 = Offset( - screenWidth, - startOffset.dy + distanceToEdge * math.tan(angle2), - ); + // Use shared calculation method for perfect consistency with drawFanFills + final List> fanPolygons = + FibonacciFanHelpers.calculateFanAreaPolygons( + startOffset: startOffset, + deltaX: deltaX, + deltaY: deltaY, + size: drawingContext.contentSize, + ); - // Validate coordinates before testing (same as drawFanFills) - if (FibonacciFanHelpers.areCoordinatesValid( - [startOffset, extendedPoint1, extendedPoint2])) { - // Test if the point is inside this triangular area - if (_isPointInTriangle( - offset, startOffset, extendedPoint1, extendedPoint2)) { - return true; - } + // Test if point is in any of the calculated polygons + for (final List polygon in fanPolygons) { + if (_isPointInTriangle(offset, polygon[0], polygon[1], polygon[2])) { + return true; } } diff --git a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart index 924f2345a..af404cad8 100644 --- a/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart +++ b/lib/src/deriv_chart/interactive_layer/interactable_drawings/fibfan/helpers.dart @@ -863,61 +863,52 @@ class FibonacciFanHelpers { } } - /// Draws the filled areas between fan lines using angle-based calculations. + /// Calculates the triangular polygons for each fan area between adjacent Fibonacci levels. /// - /// Creates alternating filled regions between adjacent Fibonacci fan lines - /// to provide visual distinction between different retracement levels. - /// The fill areas help users identify price zones more easily. + /// This method extracts the shared geometric calculations used by both hit testing + /// and drawing operations, eliminating code duplication and ensuring consistency. + /// Each polygon represents the area between two adjacent Fibonacci fan lines. /// /// **Algorithm:** /// 1. Calculates the base angle from start to end point - /// 2. For each Fibonacci ratio, calculates the angle as a percentage of the base angle + /// 2. For each pair of adjacent Fibonacci ratios, calculates their angles /// 3. Extends lines to screen edges using trigonometric calculations - /// 4. Creates triangular fill paths between adjacent lines - /// 5. Applies alternating opacity levels for visual distinction + /// 4. Validates coordinates and creates triangular polygons /// /// **Parameters:** - /// - [canvas]: The drawing canvas /// - [startOffset]: Starting point of the fan in screen coordinates /// - [deltaX]: Horizontal distance from start to end point /// - [deltaY]: Vertical distance from start to end point /// - [size]: Canvas size for boundary calculations - /// - [paintStyle]: Paint style configuration - /// - [fillStyle]: Fill style and color configuration - /// - [fibonacciLevelColors]: Optional custom colors for each level /// - /// **Visual Effect:** - /// - Even-indexed areas: 10% opacity - /// - Odd-indexed areas: 5% opacity - /// - Creates alternating light/lighter pattern - static void drawFanFills( - Canvas canvas, - Offset startOffset, - double deltaX, - double deltaY, - Size size, - DrawingPaintStyle paintStyle, - LineStyle fillStyle, { - Map? fibonacciLevelColors, + /// **Returns:** List of triangular areas, where each triangle is defined by three points: + /// [startOffset, extendedPoint1, extendedPoint2] + static List> calculateFanAreaPolygons({ + required Offset startOffset, + required double deltaX, + required double deltaY, + required Size size, }) { + final List> polygons = []; + // Calculate the base angle from start to end point final double baseAngle = math.atan2(deltaY, deltaX); + // Calculate screen edge distance + final double screenWidth = size.width; + final double distanceToEdge = screenWidth - startOffset.dx; + + // Generate polygons for each fan area for (int i = 0; i < fibonacciLevels.length - 1; i++) { final double ratio1 = fibonacciLevels[i].ratio; final double ratio2 = fibonacciLevels[i + 1].ratio; - // Calculate angles: 0% should point to end point, 100% should be horizontal (0 degrees) - // Interpolate between the end angle (baseAngle) and horizontal reference (0 degrees) - const double horizontalAngle = 0; // Horizontal reference + // Calculate angles + const double horizontalAngle = 0; final double angle1 = baseAngle + (horizontalAngle - baseAngle) * ratio1; final double angle2 = baseAngle + (horizontalAngle - baseAngle) * ratio2; - // Extend lines to the edge of the screen using angle-based calculations - final double screenWidth = size.width; - final double distanceToEdge = screenWidth - startOffset.dx; - - // Calculate extended points using trigonometry + // Calculate extended points final Offset extendedPoint1 = Offset( screenWidth, startOffset.dy + distanceToEdge * math.tan(angle1), @@ -927,29 +918,79 @@ class FibonacciFanHelpers { startOffset.dy + distanceToEdge * math.tan(angle2), ); - // Validate coordinates before creating path + // Validate coordinates if (areCoordinatesValid([startOffset, extendedPoint1, extendedPoint2])) { - // Create path for the filled area - final Path fillPath = Path() - ..moveTo(startOffset.dx, startOffset.dy) - ..lineTo(extendedPoint1.dx, extendedPoint1.dy) - ..lineTo(extendedPoint2.dx, extendedPoint2.dy) - ..close(); - - // Use level0 color from fibonacciLevelColors if available, otherwise use fillStyle color - final Color fillColor = (fibonacciLevelColors != null && - fibonacciLevelColors.containsKey('level0')) - ? fibonacciLevelColors['level0']! - : fillStyle.color; - - // Create custom fill paint with opacity - final Paint fillPaint = getCachedFillPaint( - fillColor.withOpacity(CoreDesignTokens.coreOpacity100), - fillStyle.thickness); - - canvas.drawPath(fillPath, fillPaint); + polygons.add([startOffset, extendedPoint1, extendedPoint2]); } } + + return polygons; + } + + /// Draws the filled areas between fan lines using angle-based calculations. + /// + /// Creates alternating filled regions between adjacent Fibonacci fan lines + /// to provide visual distinction between different retracement levels. + /// The fill areas help users identify price zones more easily. + /// + /// **Algorithm:** + /// 1. Uses shared polygon calculation method for consistency + /// 2. Creates triangular fill paths between adjacent lines + /// 3. Applies fill styling with appropriate opacity + /// + /// **Parameters:** + /// - [canvas]: The drawing canvas + /// - [startOffset]: Starting point of the fan in screen coordinates + /// - [deltaX]: Horizontal distance from start to end point + /// - [deltaY]: Vertical distance from start to end point + /// - [size]: Canvas size for boundary calculations + /// - [paintStyle]: Paint style configuration + /// - [fillStyle]: Fill style and color configuration + /// - [fibonacciLevelColors]: Optional custom colors for each level + /// + /// **Visual Effect:** + /// - Uses consistent polygon calculations with hit testing + /// - Creates alternating light/lighter pattern + static void drawFanFills( + Canvas canvas, + Offset startOffset, + double deltaX, + double deltaY, + Size size, + DrawingPaintStyle paintStyle, + LineStyle fillStyle, { + Map? fibonacciLevelColors, + }) { + // Use shared calculation method for consistency with hit testing + final List> fanPolygons = calculateFanAreaPolygons( + startOffset: startOffset, + deltaX: deltaX, + deltaY: deltaY, + size: size, + ); + + // Draw each calculated polygon + for (final List polygon in fanPolygons) { + // Create path for the filled area + final Path fillPath = Path() + ..moveTo(polygon[0].dx, polygon[0].dy) + ..lineTo(polygon[1].dx, polygon[1].dy) + ..lineTo(polygon[2].dx, polygon[2].dy) + ..close(); + + // Use level0 color from fibonacciLevelColors if available, otherwise use fillStyle color + final Color fillColor = (fibonacciLevelColors != null && + fibonacciLevelColors.containsKey('level0')) + ? fibonacciLevelColors['level0']! + : fillStyle.color; + + // Create custom fill paint with opacity + final Paint fillPaint = getCachedFillPaint( + fillColor.withOpacity(CoreDesignTokens.coreOpacity100), + fillStyle.thickness); + + canvas.drawPath(fillPath, fillPaint); + } } /// Draws the fan lines representing Fibonacci retracement levels using angle-based calculations.