feat: exclude x-axis from forced scroll area

deriv-com · Aug 15, 2024 · 22b8cfb · 22b8cfb
1 parent 27cbc34
commit 22b8cfb
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/chart_app/lib/src/chart_app.dart b/chart_app/lib/src/chart_app.dart
@@ -34,6 +34,9 @@ class ChartApp {
 
   bool _prevShowChart = false;
 
+  /// height of xAxis
+  double xAxisHeight = 24;
+
   /// width of yAxis
   double yAxisWidth = 60;
 
@@ -73,13 +76,14 @@ class ChartApp {
     feedModel.newChart();
   }
 
-  /// Calculates the width of yAxis
+  /// Calculates the width of yAxis and sets the height of xAxis
   void calculateTickWidth() {
     yAxisWidth = calculateYAxisWidth(
       feedModel.ticks,
       configModel.theme,
       configModel.pipSize,
     );
+    xAxisHeight = configModel.theme.gridStyle.xLabelsAreaHeight;
 
     currentTickWidth = calculateCurrentTickWidth(
       feedModel.ticks,

diff --git a/chart_app/lib/src/interop/dart_interop.dart b/chart_app/lib/src/interop/dart_interop.dart
@@ -30,6 +30,12 @@ void initDartInterop(ChartApp app) {
 JsObject _exposeApp(ChartApp app) {
   final JsObject jsObject = JsObject(context['Object']);
 
+  setProperty(
+    jsObject,
+    'getXAxisHeight',
+    allowInterop(() => app.xAxisHeight),
+  );
+
   setProperty(
     jsObject,
     'getYAxisWidth',

diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts
@@ -273,10 +273,12 @@ export default class ChartAdapterStore {
             const { pageX, pageY } = e.changedTouches[0];
 
             if (['touchmove', 'touchend'].includes(e.type)) {
-                const nonScrollableAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth;
-                const { left } = chartNode.getBoundingClientRect();
-                const x = pageX - left;
-                const isForcedScrollArea = x < nonScrollableAreaWidth;
+                const forcedScrollAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth;
+                const forcedScrollAreaHeight = chartNode.offsetHeight - this.mainStore.chart.xAxisHeight;
+                const { top, left } = chartNode.getBoundingClientRect();
+                const xCoord = pageX - left;
+                const yCoord = pageY - top;
+                const isForcedScrollArea = xCoord < forcedScrollAreaWidth && yCoord < forcedScrollAreaHeight;
 
                 if (this.touchValues.x && this.touchValues.y) {
                     const xDiff = this.touchValues.x - pageX;

diff --git a/src/store/ChartStore.ts b/src/store/ChartStore.ts
@@ -71,6 +71,7 @@ class ChartStore {
             networkStatus: observable,
             serverTime: observable,
             shouldRenderDialogs: observable,
+            xAxisHeight: computed,
             yAxisWidth: computed,
             lastQuote: observable,
             _initChart: action.bound,
@@ -134,6 +135,10 @@ class ChartStore {
         return this.currentCloseQuote()?.Close;
     }
 
+    get xAxisHeight(): number {
+        return window.flutterChart?.app.getXAxisHeight() || 24;
+    }
+
     get yAxisWidth(): number {
         return window.flutterChart?.app.getYAxisWidth() || 60;
     }

diff --git a/src/types/props.types.ts b/src/types/props.types.ts
@@ -378,6 +378,7 @@ export type TDrawingToolConfig = {
 
 export type TFlutterChart = {
     app: {
+        getXAxisHeight: () => number;
         getYAxisWidth: () => number;
         getCurrentTickWidth: () => number;
         newChart: (payload: TNewChartPayload) => void;