RangeSelector: use x/y attributes instead of transform for tracker positioning on Firefox+Android (T1296261) (DevExpress#30480)

Author: pharret31

packages/devextreme/js/viz/range_selector/common.js

@@ -1,5 +1,8 @@
 import { smartFormatter as _format } from '../axes/smart_formatter';
 import { isFunction } from '../../core/utils/type';
+import browser from '../../core/utils/browser';
+import devices from '../../core/devices';
+
 export const HEIGHT_COMPACT_MODE = 24;
 const POINTER_SIZE = 4;
 const EMPTY_SLIDER_MARKER_TEXT = '. . .';
@@ -12,6 +15,7 @@ export const utils = {
     },
     animationSettings: { duration: 250 }
 };
+
 export const consts = {
     emptySliderMarkerText: EMPTY_SLIDER_MARKER_TEXT,
     pointerSize: POINTER_SIZE
@@ -31,3 +35,5 @@ export const formatValue = function(value, formatOptions, tickIntervalsInfo, val
     };
     return String(isFunction(formatOptions.customizeText) ? formatOptions.customizeText.call(formatObject, formatObject) : formatObject.valueText);
 };
+
+export const isFirefoxOnAndroid = () => browser.mozilla && devices.real().android;

packages/devextreme/js/viz/range_selector/slider.js

@@ -1,4 +1,4 @@
-import { utils, formatValue } from './common';
+import { utils, formatValue, isFirefoxOnAndroid } from './common';
 const animationSettings = utils.animationSettings;
 import SliderMarker from './slider_marker';
 import supportUtils from '../../__internal/core/utils/m_support';
@@ -16,7 +16,14 @@ function Slider(params, index) {
     that._sliderGroup = params.renderer.g().attr({ 'class': 'slider' }).append(params.root);
     that._line = params.renderer.path(null, 'line').append(that._sliderGroup);
     that._marker = new SliderMarker(params.renderer, that._sliderGroup, index === 1);
-    that._tracker = params.renderer.rect().attr({ 'class': 'slider-tracker', fill: '#000000', opacity: 0.0001 }).css({ cursor: 'w-resize' }).append(params.trackersGroup);
+    that._tracker = params.renderer.rect()
+        .attr({
+            'class': 'slider-tracker',
+            fill: '#000000',
+            opacity: 0.0001,
+        })
+        .css({ cursor: 'w-resize' })
+        .append(params.trackersGroup);
 }
 
 Slider.prototype = {
@@ -31,15 +38,22 @@ Slider.prototype = {
         const that = this;
         const slider = that._sliderGroup;
         const tracker = that._tracker;
-        const attrs = { translateX: that._position };
+
+        const sliderAttrs = { translateX: that._position };
+        let trackerAttrs = { translateX: that._position };
+
+        if(isFirefoxOnAndroid()) {
+            trackerAttrs = { x: that._position - (tracker._originalWidth / 2) };
+        }
 
         that._marker.setPosition(that._position);
+
         if(isAnimated) {
-            slider.animate(attrs, animationSettings);
-            tracker.animate(attrs, animationSettings);
+            slider.animate(sliderAttrs, animationSettings);
+            tracker.animate(trackerAttrs, animationSettings);
         } else {
-            slider.attr(attrs);
-            tracker.attr(attrs);
+            slider.attr(sliderAttrs);
+            tracker.attr(trackerAttrs);
         }
     },
 
@@ -59,11 +73,23 @@ Slider.prototype = {
         that._colors = [sliderMarkerOptions.invalidRangeColor, sliderHandleOptions.color];
         that._sliderGroup.attr({ translateY: verticalRange[0] });
         that._line.attr({
-            'stroke-width': sliderHandleOptions.width, stroke: sliderHandleOptions.color, 'stroke-opacity': sliderHandleOptions.opacity, sharp: 'h',
+            'stroke-width': sliderHandleOptions.width,
+            stroke: sliderHandleOptions.color,
+            'stroke-opacity': sliderHandleOptions.opacity,
+            sharp: 'h',
             points: [0, 0, 0, verticalRange[1] - verticalRange[0]]
         });
         const trackerWidth = getSliderTrackerWidth(sliderHandleOptions.width);
-        that._tracker.attr({ x: -trackerWidth / 2, y: 0, width: trackerWidth, height: verticalRange[1] - verticalRange[0], translateY: verticalRange[0] });
+
+        const trackerAttrs = {
+            x: -trackerWidth / 2,
+            width: trackerWidth,
+            height: verticalRange[1] - verticalRange[0],
+            y: isFirefoxOnAndroid() ? verticalRange[0] : 0,
+            translateY: isFirefoxOnAndroid() ? undefined : verticalRange[0]
+        };
+
+        that._tracker.attr(trackerAttrs);
     },
 
     toForeground: function() {

packages/devextreme/js/viz/range_selector/slider_marker.js

@@ -1,5 +1,5 @@
 import { patchFontOptions } from '../core/utils';
-import { consts } from './common';
+import { consts, isFirefoxOnAndroid } from './common';
 
 const POINTER_SIZE = consts.pointerSize;
 const SLIDER_MARKER_UPDATE_DELAY = 75;
@@ -135,7 +135,14 @@ SliderMarker.prototype = {
             const offset = pointsData.offset;
             that._area.attr({ points: points });
             that._border.attr({ x: that._isLeftPointer ? points[0] - 1 : points[2], height: pointsData.isCut ? rectSize.height : rectSize.height + POINTER_SIZE });
-            that._tracker.attr({ translateX: offset, width: rectSize.width, height: rectSize.height + POINTER_SIZE });
+
+            const trackerAttrs = { translateX: offset, width: rectSize.width, height: rectSize.height + POINTER_SIZE };
+            if(isFirefoxOnAndroid()) {
+                trackerAttrs.x = offset;
+                trackerAttrs.translateX = undefined;
+            }
+            that._tracker.attr(trackerAttrs);
+
             that._label.attr({ translateX: that._paddingLeftRight + offset, translateY: rectSize.height / 2 - (size.y + size.height / 2) });
         }
 

packages/devextreme/js/viz/range_selector/sliders_controller.js

@@ -1,5 +1,5 @@
 import { noop } from '../../core/utils/common';
-import { utils, consts } from './common';
+import { utils, consts, isFirefoxOnAndroid } from './common';
 import Slider from './slider';
 import { normalizeEnum as _normalizeEnum, rangesAreEqual, adjustVisualRange } from '../core/utils';
 import { isNumeric, isDefined } from '../../core/utils/type';
@@ -169,12 +169,25 @@ SlidersController.prototype = {
         sliders[1].setOverlapped(areOverlapped);
         this._applyAreaTrackersPosition();
         this._applySelectedRangePosition(isAnimated);
+        if(isFirefoxOnAndroid()) {
+            this._areaTracker.attr({ transform: null });
+            this._selectedAreaTracker.attr({ transform: null });
+            this._sliders.forEach(slider => {
+                slider._tracker.attr({ transform: null });
+            });
+        }
     },
 
     _applyAreaTrackersPosition: function() {
         const that = this;
-        const position1 = that._sliders[0].getPosition();
-        const position2 = that._sliders[1].getPosition();
+        let position1 = that._sliders[0].getPosition();
+        let position2 = that._sliders[1].getPosition();
+
+        if(isFirefoxOnAndroid()) {
+            position1 += that._sliders[0]._tracker._originalWidth / 2;
+            position2 -= that._sliders[1]._tracker._originalWidth / 2;
+        }
+
         that._selectedAreaTracker.attr({ points: buildRectPoints(position1, that._verticalRange[0], position2, that._verticalRange[1]) }).css({
             cursor: Math.abs(that._params.translator.getScreenRange()[1] - that._params.translator.getScreenRange()[0] - position2 + position1) < 0.001 ? 'default' : 'pointer'
         });

packages/devextreme/testing/tests/DevExpress.viz.rangeSelector/common_new.tests.js

@@ -41,7 +41,7 @@ QUnit.module('RangeSelector', {
 });
 
 // T347971
-QUnit.test('Empty scale is drawn with compact height when \'dataSource\' is defined and \'chart\' is not', function(assert) {
+QUnit.test('Empty scale is drawn with compact height when dataSource is defined and chart is not', function(assert) {
     this.$container.dxRangeSelector({
         dataSource: []
     });
@@ -52,7 +52,7 @@ QUnit.test('Empty scale is drawn with compact height when \'dataSource\' is defi
 });
 
 // T347971
-QUnit.test('Empty scale is drawn with full height when \'dataSource\' is not defined and \'chart\' is', function(assert) {
+QUnit.test('Empty scale is drawn with full height when dataSource is not defined and chart is', function(assert) {
     this.$container.dxRangeSelector({
         chart: {
             series: {}
@@ -65,7 +65,7 @@ QUnit.test('Empty scale is drawn with full height when \'dataSource\' is not def
 });
 
 // T347971
-QUnit.test('There is no unexpected incident when \'chart.series\' array is empty', function(assert) {
+QUnit.test('There is no unexpected incident when chart.series array is empty', function(assert) {
     const spy = sinon.spy();
     this.$container.dxRangeSelector({
         dataSource: [],
@@ -79,7 +79,7 @@ QUnit.test('There is no unexpected incident when \'chart.series\' array is empty
 });
 
 // T347293
-QUnit.test('There is no error when \'dataSource\' is an empty array and scale is discrete datetime', function(assert) {
+QUnit.test('There is no error when dataSource is an empty array and scale is discrete datetime', function(assert) {
     const translator = this.axis.getTranslator();
     translator.updateBusinessRange({});
 

packages/devextreme/testing/tests/DevExpress.viz.rangeSelector/range_selector.integration.tests.js

@@ -1,6 +1,8 @@
 import $ from 'jquery';
 import 'viz/range_selector/range_selector';
 import { DataSource } from 'common/data/data_source/data_source';
+import browser from 'core/utils/browser';
+import devices from '__internal/core/m_devices';
 
 QUnit.testStart(function() {
     const markup =
@@ -871,3 +873,83 @@ QUnit.test('Scale from dataSource. calculate linearThreshold', function(assert)
     assert.deepEqual(rangeSelector.getValue(), [-100, 1000]);
     assert.equal(rangeSelector._axis.getTranslator().getBusinessRange().linearThreshold, -4);
 });
+
+QUnit.module('Firefox for Android adjustments (T1296261)', {
+    createRangeSelector() {
+        $('#container').dxRangeSelector({
+            margin: {
+                top: 10,
+            },
+            scale: {
+                startValue: 35,
+                endValue: 150,
+            },
+            value: [40, 80],
+            behavior: {
+                animationEnabled: false,
+            }
+        });
+    },
+    beforeEach: function() {
+        this.createRangeSelector();
+    },
+}, () => {
+    if(!browser.mozilla || !devices.real().android) {
+        return;
+    }
+
+    QUnit.test('there should not be transform props on trackers if browser is Firefox for Android', function(assert) {
+        const $areaTracker = $('.area-tracker');
+        const $selectedAreaTracker = $('.selected-area-tracker');
+        const $sliderTrackers = $('.slider-tracker');
+
+        assert.strictEqual($areaTracker.attr('transform'), undefined, 'area tracker does not have transform prop');
+        assert.strictEqual($selectedAreaTracker.attr('transform'), undefined, 'selected area tracker does not have transform prop');
+        $sliderTrackers.each((index, tracker) => {
+            assert.strictEqual($(tracker).attr('transform'), undefined, `slider tracker ${index} does not have transform prop`);
+        });
+    });
+
+    QUnit.test('it should set x and y props instead of transform to position sliders if browser is Firefox for Android', function(assert) {
+        const $sliderTrackers = $('.slider-tracker');
+
+        $sliderTrackers.each((index, tracker) => {
+            const $tracker = $(tracker);
+            const xCoordinate = parseInt($tracker.attr('x'));
+            const yCoordinate = parseInt($tracker.attr('y'));
+
+            assert.strictEqual(xCoordinate >= 0, true, `slider tracker ${index} should have valid x position: ${xCoordinate}`);
+            assert.strictEqual(yCoordinate > 0, true, `slider tracker ${index} should have valid y position: ${yCoordinate}`);
+        });
+
+        const leftX = parseInt($sliderTrackers.eq(0).attr('x'));
+        const rightX = parseInt($sliderTrackers.eq(1).attr('x'));
+        assert.strictEqual(leftX < rightX, true, `left tracker x (${leftX}) is less than right slider x (${rightX})`);
+
+        const leftY = parseInt($sliderTrackers.eq(0).attr('y'));
+        const rightY = parseInt($sliderTrackers.eq(1).attr('y'));
+        assert.strictEqual(leftX < rightX, true, `left tracker y (${leftY}) is the same as the right slider y (${rightY})`);
+    });
+
+    QUnit.test('selected area tracker position should be adjusted by half tracker width if browser is Firefox for Android', function(assert) {
+        const $selectedAreaTracker = $('.selected-area-tracker');
+        const $sliderTrackers = $('.slider-tracker');
+
+        const leftSliderX = parseInt($sliderTrackers.eq(0).attr('x'));
+        const rightSliderX = parseInt($sliderTrackers.eq(1).attr('x'));
+
+        const trackerWidth = parseInt($sliderTrackers.eq(0).attr('width'));
+
+        const selectedAreaPoints = $selectedAreaTracker.attr('d');
+
+        const points = selectedAreaPoints.split(' ').map(p => parseFloat(p));
+        const selectedAreaLeft = points[1];
+        const selectedAreaRight = points[4];
+
+        const expectedLeft = leftSliderX + trackerWidth;
+        const expectedRight = rightSliderX;
+
+        assert.roughEqual(selectedAreaLeft, expectedLeft, 1, 'Selected area left starts on the tracker end');
+        assert.roughEqual(selectedAreaRight, expectedRight, 1, 'Selected area right ends where the right tracker starts');
+    });
+});