@devexperts/dxcharts-lite 2.7.15 → 2.7.17

package/dist/chart/utils/performance/safari/components/chart-area-pan.handler/safari-chart-area-pan.handler.js

@@ -0,0 +1,180 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * 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 { animationFrameScheduler } from 'rxjs';
+import { throttleTime, filter, debounceTime } from 'rxjs/operators';
+import { CanvasElement } from '../../../../../canvas/canvas-bounds-container';
+import { pixelsToUnits } from '../../../../../model/scaling/viewport.model';
+import { deviceDetector } from '../../../../../utils/device/device-detector.utils';
+import { ONE_FRAME_MS } from '../../../../../utils/numeric-constants.utils';
+import { EVENT_RESIZED } from '../../../../../events/events';
+import { DEFAULT_THROTTLE_MS, LARGE_SCREEN_PIXEL_THRESHOLD, LARGE_SCREEN_THROTTLE_MS, LOW_WHEEL_EVENTS_THRESHOLD, SAFARI_THROTTLE_MS, WHEEL_MONITORING_INTERVAL_MS, } from '../../safari-performance.model';
+import { ChartAreaPanHandler } from '../../../../../components/chart/chart-area-pan.handler';
+/**
+ * SafariChartAreaPanHandler is a class that handles the panning and zooming of the chart area for Safari.
+ */
+export class SafariChartAreaPanHandler extends ChartAreaPanHandler {
+    constructor(bus, config, scale, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel) {
+        super(bus, config, scale, canvasInputListener, canvasBoundsContainer, canvasAnimation, chartPanComponent, hitTestCanvasModel);
+        this.bus = bus;
+        this.config = config;
+        this.scale = scale;
+        this.canvasInputListener = canvasInputListener;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.canvasAnimation = canvasAnimation;
+        this.chartPanComponent = chartPanComponent;
+        this.hitTestCanvasModel = hitTestCanvasModel;
+        this.currentPoint = { x: 0, y: 0 };
+        this.xDraggedCandlesDelta = 0;
+        this.lastXStart = 0;
+        this.wheelThrottleTime = ONE_FRAME_MS;
+        this.wheelSubscription = null;
+        this.initFrameId = null;
+        this.isActivated = false;
+        this.lastWheelTime = 0;
+        this.wheelCount = 0;
+        this.consecutiveLowWheelEvents = 0;
+        this.chartPanningOptions = { horizontal: true, vertical: true };
+    }
+    /**
+     * This method is used to activate the zoom functionality of the canvas. It extends the doActivate method of the parent class.
+     * @protected
+     * @returns {void}
+     */
+    doActivate() {
+        if (this.isActivated) {
+            return;
+        }
+        this.isActivated = true;
+        super.doActivate();
+        this.canvasInputListener.initializeRectCache();
+        this.createWheelSubscription();
+        this.initFrameId = requestAnimationFrame(() => {
+            this.bus.fireDraw();
+        });
+        this.addRxSubscription(this.chartPanComponent.chartBaseModel.dataPrependSubject
+            .asObservable()
+            .subscribe(({ prependedCandlesWidth }) => {
+            this.lastXStart += prependedCandlesWidth;
+        }));
+        this.addRxSubscription(this.bus
+            .observe(EVENT_RESIZED)
+            .pipe(debounceTime(100))
+            .subscribe(() => {
+            if (this.scale && typeof this.scale.haltAnimation === 'function') {
+                this.scale.haltAnimation();
+            }
+        }));
+    }
+    /**
+     * Creates wheel subscription with optimized throttling
+     */
+    createWheelSubscription() {
+        if (this.wheelSubscription) {
+            this.wheelSubscription.unsubscribe();
+            this.wheelSubscription = null;
+        }
+        const allPanesHitTest = this.canvasBoundsContainer.getBoundsHitTest(CanvasElement.ALL_PANES);
+        const canvasBounds = this.canvasBoundsContainer.getBounds(CanvasElement.CANVAS);
+        const totalPixels = canvasBounds.width * canvasBounds.height;
+        if (totalPixels > 0) {
+            if (totalPixels > LARGE_SCREEN_PIXEL_THRESHOLD) {
+                this.wheelThrottleTime = LARGE_SCREEN_THROTTLE_MS;
+            }
+            else {
+                this.wheelThrottleTime = SAFARI_THROTTLE_MS;
+            }
+        }
+        else {
+            this.wheelThrottleTime = DEFAULT_THROTTLE_MS;
+        }
+        this.wheelSubscription = this.canvasInputListener
+            .observeWheel(allPanesHitTest)
+            .pipe(filter(() => this.chartPanningOptions.horizontal && this.chartPanningOptions.vertical), filter((e) => {
+            const device = deviceDetector();
+            if (device === 'apple') {
+                const minDelta = 1.0;
+                return Math.abs(e.deltaY) > minDelta || Math.abs(e.deltaX) > minDelta;
+            }
+            return true;
+        }), throttleTime(this.wheelThrottleTime, animationFrameScheduler, { trailing: true, leading: true }))
+            .subscribe(e => {
+            const now = performance.now();
+            if (!this.lastWheelTime) {
+                this.lastWheelTime = now;
+                this.wheelCount = 0;
+            }
+            this.wheelCount++;
+            if (now - this.lastWheelTime > WHEEL_MONITORING_INTERVAL_MS) {
+                const wheelEventsPerSecond = Math.round((this.wheelCount * 1000) / (now - this.lastWheelTime));
+                if (wheelEventsPerSecond < LOW_WHEEL_EVENTS_THRESHOLD) {
+                    this.consecutiveLowWheelEvents++;
+                    if (this.consecutiveLowWheelEvents >= 1) {
+                        this.triggerPerformanceCleanup();
+                        this.consecutiveLowWheelEvents = 0;
+                    }
+                }
+                else {
+                    this.consecutiveLowWheelEvents = 0;
+                }
+                this.lastWheelTime = now;
+                this.wheelCount = 0;
+            }
+            const device = deviceDetector();
+            const direction = device === 'apple' || device === 'mobile' ? -1 : 1;
+            const deltaX = 0 + e.deltaX * direction;
+            const deltaY = 0 + e.deltaY * direction;
+            if (e.ctrlKey) {
+                const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
+                this.zoomXHandler(e, zoomSensitivity);
+                this.bus.fireDraw();
+                return;
+            }
+            if (deltaY !== 0 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                const zoomSensitivity = this.calculateDynamicSesitivity(e, this.config.scale.zoomSensitivity.wheel);
+                this.zoomXHandler(e, zoomSensitivity);
+                this.bus.fireDraw();
+            }
+            if (deltaX !== 0 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                const unitsDelta = pixelsToUnits(deltaX, this.scale.zoomX);
+                this.scale.moveXStart(this.scale.xStart - unitsDelta);
+                this.bus.fireDraw();
+                return;
+            }
+        });
+        this.addRxSubscription(this.wheelSubscription);
+    }
+    /**
+     * Manual cleanup trigger for immediate performance recovery
+     */
+    triggerPerformanceCleanup() {
+        window.dispatchEvent(new Event('resize'));
+        if (window.gc) {
+            window.gc();
+        }
+        if (this.initFrameId) {
+            cancelAnimationFrame(this.initFrameId);
+            this.initFrameId = null;
+        }
+        if (this.scale && typeof this.scale.haltAnimation === 'function') {
+            this.scale.haltAnimation();
+        }
+        this.consecutiveLowWheelEvents = 0;
+        this.wheelCount = 0;
+        this.lastWheelTime = 0;
+    }
+    doDeactivate() {
+        if (this.wheelSubscription) {
+            this.wheelSubscription.unsubscribe();
+            this.wheelSubscription = null;
+        }
+        if (this.initFrameId) {
+            cancelAnimationFrame(this.initFrameId);
+            this.initFrameId = null;
+        }
+        this.isActivated = false;
+        super.doDeactivate();
+    }
+}

package/dist/chart/utils/performance/safari/safari-performance.model.d.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * 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/.
+ */
+export type SafariThrottleTimeMS = number;
+/**
+ * Safari canvas performance limits because of Safari's GPU limits
+ */
+export declare const SAFARI_CANVAS_LIMITS: {
+    readonly MAX_DIMENSION: 2048;
+    readonly MAX_TOTAL_PIXELS: 1800000;
+    readonly ZOOM_OPTIMIZED_PIXELS: 1200000;
+};
+export declare const LARGE_SCREEN_PIXEL_THRESHOLD = 2000000;
+export declare const LARGE_SCREEN_THROTTLE_MS = 24;
+export declare const SAFARI_THROTTLE_MS = 20;
+export declare const DEFAULT_THROTTLE_MS = 16;
+export declare const LOW_WHEEL_EVENTS_THRESHOLD = 10;
+export declare const WHEEL_MONITORING_INTERVAL_MS = 1000;
+/**
+ * Threshold for significant canvas area change to trigger subscription recreation
+ * Prevents unnecessary recreation for minor size adjustments
+ */
+export declare const CANVAS_AREA_CHANGE_THRESHOLD = 50000;
+export declare const SafariThrottleTimeMSMap: {
+    readonly MIN: 60;
+    readonly LOW: 80;
+    readonly MEDIUM: 100;
+    readonly HIGH: 120;
+    readonly MAX: 150;
+};

package/dist/chart/utils/performance/safari/safari-performance.model.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * 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/.
+ */
+/**
+ * Safari canvas performance limits because of Safari's GPU limits
+ */
+export const SAFARI_CANVAS_LIMITS = {
+    MAX_DIMENSION: 2048,
+    MAX_TOTAL_PIXELS: 1800000,
+    ZOOM_OPTIMIZED_PIXELS: 1200000,
+};
+export const LARGE_SCREEN_PIXEL_THRESHOLD = 2000000; // 2M pixels
+export const LARGE_SCREEN_THROTTLE_MS = 24;
+export const SAFARI_THROTTLE_MS = 20;
+export const DEFAULT_THROTTLE_MS = 16;
+export const LOW_WHEEL_EVENTS_THRESHOLD = 10; // Minimum wheel events per second
+export const WHEEL_MONITORING_INTERVAL_MS = 1000;
+/**
+ * Threshold for significant canvas area change to trigger subscription recreation
+ * Prevents unnecessary recreation for minor size adjustments
+ */
+export const CANVAS_AREA_CHANGE_THRESHOLD = 50000;
+export const SafariThrottleTimeMSMap = {
+    MIN: 60,
+    LOW: 80,
+    MEDIUM: 100,
+    HIGH: 120,
+    MAX: 150,
+};

package/dist/chart/utils/performance/safari/safari-performance.utils.d.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * 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 { SafariThrottleTimeMS } from './safari-performance.model';
+/**
+ * Safari Performance Optimization Utilities
+ *
+ * This module contains utilities specifically designed to address Safari performance issues
+ * during drag/zoom operations on charts.
+ */
+/**
+ * Calculates optimal throttle time for hit-test wheel events based on canvas size and browser
+ * @param canvasArea - Total canvas area in pixels (width * height)
+ * @returns Throttle time in milliseconds
+ */
+export declare function calculateHitTestThrottleTime(canvasArea: number): SafariThrottleTimeMS;

package/dist/chart/utils/performance/safari/safari-performance.utils.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
+ * 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 { SAFARI_CANVAS_LIMITS, SafariThrottleTimeMSMap } from './safari-performance.model';
+/**
+ * Safari Performance Optimization Utilities
+ *
+ * This module contains utilities specifically designed to address Safari performance issues
+ * during drag/zoom operations on charts.
+ */
+/**
+ * Calculates optimal throttle time for hit-test wheel events based on canvas size and browser
+ * @param canvasArea - Total canvas area in pixels (width * height)
+ * @returns Throttle time in milliseconds
+ */
+export function calculateHitTestThrottleTime(canvasArea) {
+    if (canvasArea > SAFARI_CANVAS_LIMITS.ZOOM_OPTIMIZED_PIXELS) {
+        return SafariThrottleTimeMSMap.MAX;
+    }
+    else if (canvasArea > SAFARI_CANVAS_LIMITS.ZOOM_OPTIMIZED_PIXELS * 0.75) {
+        return SafariThrottleTimeMSMap.HIGH;
+    }
+    else if (canvasArea > SAFARI_CANVAS_LIMITS.ZOOM_OPTIMIZED_PIXELS * 0.5) {
+        return SafariThrottleTimeMSMap.MEDIUM;
+    }
+    else if (canvasArea > SAFARI_CANVAS_LIMITS.ZOOM_OPTIMIZED_PIXELS * 0.25) {
+        return SafariThrottleTimeMSMap.LOW;
+    }
+    else {
+        return SafariThrottleTimeMSMap.MIN;
+    }
+}