From 2a1877ffa8c310b524a97e3c774e29b6ba661b35 Mon Sep 17 00:00:00 2001
From: luan <103875612+b1tjoy@users.noreply.github.com>
Date: Mon, 29 Aug 2022 23:08:51 +0800
Subject: [PATCH 1/2] get scroll direction based on the first scroll event

---
 .../HTMLRenderers/PreRenderer/index.js        | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js
index 6b911a720aff..fccf9ede332c 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import _ from 'underscore';
 import withLocalize from '../../../withLocalize';
 import htmlRendererPropTypes from '../htmlRendererPropTypes';
 import BasePreRenderer from './BasePreRenderer';
@@ -8,6 +9,8 @@ class PreRenderer extends React.Component {
         super(props);
 
         this.scrollNode = this.scrollNode.bind(this);
+        this.isVerticalScrolling = false;
+        this.debouncedGetScrollDirection = _.debounce(this.getScrollDirection.bind(this), 100, true);
     }
 
     componentDidMount() {
@@ -23,6 +26,17 @@ class PreRenderer extends React.Component {
             .removeEventListener('wheel', this.scrollNode);
     }
 
+    /**
+     * Get scroll direction based on deltaX and deltaY. We debounce this
+     * method in the constructor to make sure it's called only for the first event.
+     * @param {WheelEvent} event Wheel event
+     */
+    getScrollDirection(event) {
+        // Mark as vertical scrolling only when absolute value of deltaY is more than the double of absolute
+        // value of deltaX, so user can use trackpad scroll on the code block horizontally at a wide angle.
+        this.isVerticalScrolling = Math.abs(event.deltaY) > (Math.abs(event.deltaX) * 2);
+    }
+
     /**
      * Manually scrolls the code block if code block horizontal scrollable, then prevents the event from being passed up to the parent.
      * @param {Object} event native event
@@ -30,10 +44,8 @@ class PreRenderer extends React.Component {
     scrollNode(event) {
         const node = this.ref.getScrollableNode();
         const horizontalOverflow = node.scrollWidth > node.offsetWidth;
-
-        // Account for vertical scrolling variation when horizontally scrolling via touchpad by checking a large delta.
-        const isVerticalScrolling = Math.abs(event.deltaY) > 3; // This is for touchpads sensitive
-        if ((event.currentTarget === node) && horizontalOverflow && !isVerticalScrolling) {
+        this.debouncedGetScrollDirection(event);
+        if ((event.currentTarget === node) && horizontalOverflow && !this.isVerticalScrolling) {
             node.scrollLeft += event.deltaX;
             event.preventDefault();
             event.stopPropagation();

From 37389a86add45f1edfef76df376d14d4a3516426 Mon Sep 17 00:00:00 2001
From: luan <103875612+b1tjoy@users.noreply.github.com>
Date: Tue, 30 Aug 2022 07:56:49 +0800
Subject: [PATCH 2/2] move isScrollingVertically to local variable of event
 handler

---
 .../HTMLRenderers/PreRenderer/index.js             | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js
index fccf9ede332c..7fc61a36e95b 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js
@@ -9,8 +9,7 @@ class PreRenderer extends React.Component {
         super(props);
 
         this.scrollNode = this.scrollNode.bind(this);
-        this.isVerticalScrolling = false;
-        this.debouncedGetScrollDirection = _.debounce(this.getScrollDirection.bind(this), 100, true);
+        this.debouncedIsScrollingVertically = _.debounce(this.isScrollingVertically.bind(this), 100, true);
     }
 
     componentDidMount() {
@@ -27,14 +26,15 @@ class PreRenderer extends React.Component {
     }
 
     /**
-     * Get scroll direction based on deltaX and deltaY. We debounce this
+     * Check if user is scrolling vertically based on deltaX and deltaY. We debounce this
      * method in the constructor to make sure it's called only for the first event.
      * @param {WheelEvent} event Wheel event
+     * @returns {Boolean} true if user is scrolling vertically
      */
-    getScrollDirection(event) {
+    isScrollingVertically(event) {
         // Mark as vertical scrolling only when absolute value of deltaY is more than the double of absolute
         // value of deltaX, so user can use trackpad scroll on the code block horizontally at a wide angle.
-        this.isVerticalScrolling = Math.abs(event.deltaY) > (Math.abs(event.deltaX) * 2);
+        return Math.abs(event.deltaY) > (Math.abs(event.deltaX) * 2);
     }
 
     /**
@@ -44,8 +44,8 @@ class PreRenderer extends React.Component {
     scrollNode(event) {
         const node = this.ref.getScrollableNode();
         const horizontalOverflow = node.scrollWidth > node.offsetWidth;
-        this.debouncedGetScrollDirection(event);
-        if ((event.currentTarget === node) && horizontalOverflow && !this.isVerticalScrolling) {
+        const isScrollingVertically = this.debouncedIsScrollingVertically(event);
+        if ((event.currentTarget === node) && horizontalOverflow && !isScrollingVertically) {
             node.scrollLeft += event.deltaX;
             event.preventDefault();
             event.stopPropagation();