feat: added animationFrameSceduler to throttle time

docs/how-to/custom-drawer/index.html

@@ -24,7 +24,7 @@ <h1>Chart custom drawer example</h1>
 		</div>
 		<div id="chart" class="chart"></div>
 		<script type="module">
-			import { clipToBounds } from '@devexperts/dxcharts-lite/dist/chart/drawers/data-series.drawer';
+			import { clipToBounds } from  '@devexperts/dxcharts-lite/dist/chart/utils/canvas/canvas-drawing-functions.utils';
 			import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';
 			const container = document.getElementById('chart');
 			const chart = DXChart.createChart(container);

src/chart/canvas/cursor.handler.ts

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { Observable, Subject } from 'rxjs';
+import { Observable, Subject, animationFrameScheduler } from 'rxjs';
 import { distinctUntilChanged, throttleTime } from 'rxjs/operators';
 import { CursorType } from '../chart.config';
 import { CanvasInputListenerComponent } from '../inputlisteners/canvas-input-listener.component';
@@ -42,7 +42,7 @@ export class CursorHandler extends ChartBaseElement {
 		super.doActivate();
 		this.canvasInputListener
 			.observeMouseMoveNoDrag()
-			.pipe(throttleTime(100, undefined, { trailing: true }))
+			.pipe(throttleTime(100, animationFrameScheduler, { trailing: true }))
 			.subscribe(point => {
 				const cursorFromHT = this.hitTestCanvasModel.resolveCursor(point);
 				if (cursorFromHT !== undefined) {

src/chart/components/chart/chart-area-pan.handler.ts

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { merge } from 'rxjs';
+import { merge, animationFrameScheduler } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 import { CanvasAnimation, VIEWPORT_ANIMATION_ID } from '../../animation/canvas-animation';
 import { CanvasBoundsContainer, CanvasElement, HitBoundsTest } from '../../canvas/canvas-bounds-container';
@@ -130,7 +130,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
 				this.canvasInputListener.observeWheel(allPanesHitTest),
 				this.canvasInputListener.observePinch(allPanesHitTest),
 			)
-				.pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
+				.pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
 				.subscribe(e => {
 					const isTouchpad = touchpadDetector(e);
 					const zoomSensitivity = isTouchpad
@@ -146,7 +146,7 @@ export class ChartAreaPanHandler extends ChartBaseElement {
 		this.addRxSubscription(
 			this.canvasInputListener
 				.observeScrollGesture()
-				.pipe(throttleTime(this.wheelTrottleTime, undefined, { trailing: true, leading: true }))
+				.pipe(throttleTime(this.wheelTrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
 				.subscribe((e: WheelEvent) => {
 					let direction = -1;
 					const device = deviceDetector();

src/chart/components/x_axis/x-axis.component.ts

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { merge } from 'rxjs';
+import { merge, animationFrameScheduler } from 'rxjs';
 import { distinctUntilChanged, map, throttleTime, filter } from 'rxjs/operators';
 import { CanvasBoundsContainer, CanvasElement } from '../../canvas/canvas-bounds-container';
 import { CursorHandler } from '../../canvas/cursor.handler';
@@ -136,7 +136,7 @@ export class XAxisComponent extends ChartBaseElement {
 
 		this.addRxSubscription(
 			merge(this.scale.xChanged, this.chartResizeHandler.canvasResized)
-				.pipe(throttleTime(50, undefined, { trailing: true, leading: true }))
+				.pipe(throttleTime(50, animationFrameScheduler, { trailing: true, leading: true }))
 				.subscribe(() => {
 					this.xAxisLabelsGenerator.recalculateLabels();
 				}),

src/chart/model/hit-test-canvas.model.ts

@@ -3,7 +3,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import { merge, Observable, Subject, Subscription } from 'rxjs';
+import { merge, Observable, Subject, Subscription, animationFrameScheduler } from 'rxjs';
 import { map, throttleTime } from 'rxjs/operators';
 import { CanvasBoundsContainer, CanvasElement } from '../canvas/canvas-bounds-container';
 import { CursorType, FullChartConfig } from '../chart.config';
@@ -69,7 +69,7 @@ export class HitTestCanvasModel extends CanvasModel {
 
 			const hoverSub = this.canvasInputListener
 				.observeMouseMove()
-				.pipe(throttleTime(100, undefined, { trailing: true }))
+				.pipe(throttleTime(100, animationFrameScheduler, { trailing: true }))
 				.subscribe(point => this.eventHandler(point, 'hover'));
 
 			const touchStartSub = this.canvasInputListener