echarts 3.6.1 → 3.7.2

package/src/component/axis/CartesianAxisView.js

@@ -9,7 +9,7 @@ define(function (require) {
     var getInterval = AxisBuilder.getInterval;
 
     var axisBuilderAttrs = [
-        'axisLine', 'axisLabel', 'axisTick', 'axisName'
+        'axisLine', 'axisTickLabel', 'axisName'
     ];
     var selfBuilderAttrs = [
         'splitArea', 'splitLine'
@@ -97,13 +97,19 @@ define(function (require) {
             );
             var ticks = axis.scale.getTicks();
 
+            var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+            var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
             var p1 = [];
             var p2 = [];
             // Simple optimization
             // Batching the lines if color are the same
             var lineStyle = lineStyleModel.getLineStyle();
             for (var i = 0; i < ticksCoords.length; i++) {
-                if (ifIgnoreOnTick(axis, i, lineInterval)) {
+                if (ifIgnoreOnTick(
+                    axis, i, lineInterval, ticksCoords.length,
+                    showMinLabel, showMaxLabel
+                )) {
                     continue;
                 }
 
@@ -174,8 +180,14 @@ define(function (require) {
             var areaStyle = areaStyleModel.getAreaStyle();
             areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
 
+            var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+            var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
             for (var i = 1; i < ticksCoords.length; i++) {
-                if (ifIgnoreOnTick(axis, i, areaInterval)) {
+                if (ifIgnoreOnTick(
+                    axis, i, areaInterval, ticksCoords.length,
+                    showMinLabel, showMaxLabel
+                )) {
                     continue;
                 }
 

package/src/component/axis/ParallelAxisView.js

@@ -6,7 +6,7 @@ define(function (require) {
     var brushHelper = require('../helper/brushHelper');
     var graphic = require('../../util/graphic');
 
-    var elementList = ['axisLine', 'axisLabel', 'axisTick', 'axisName'];
+    var elementList = ['axisLine', 'axisTickLabel', 'axisName'];
 
     var AxisView = require('../../echarts').extendComponentView({
 

package/src/component/axis/RadiusAxisView.js

@@ -7,7 +7,7 @@ define(function (require) {
     var AxisBuilder = require('./AxisBuilder');
 
     var axisBuilderAttrs = [
-        'axisLine', 'axisLabel', 'axisTick', 'axisName'
+        'axisLine', 'axisTickLabel', 'axisName'
     ];
     var selfBuilderAttrs = [
         'splitLine', 'splitArea'

package/src/component/axis/SingleAxisView.js

@@ -8,7 +8,7 @@ define(function (require) {
     var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick;
 
     var axisBuilderAttrs = [
-        'axisLine', 'axisLabel', 'axisTick', 'axisName'
+        'axisLine', 'axisTickLabel', 'axisName'
     ];
 
     var selfBuilderAttr = 'splitLine';
@@ -66,8 +66,14 @@ define(function (require) {
             var p1 = [];
             var p2 = [];
 
+            var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+            var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
             for (var i = 0; i < ticksCoords.length; ++i) {
-                if (ifIgnoreOnTick(axis, i, lineInterval)) {
+                if (ifIgnoreOnTick(
+                    axis, i, lineInterval, ticksCoords.length,
+                    showMinLabel, showMaxLabel
+                )) {
                     continue;
                 }
                 var tickCoord = axis.toGlobalCoord(ticksCoords[i]);

package/src/component/axis/cartesianAxisHelper.js

@@ -21,29 +21,25 @@ define(function (require) {
         var axisPosition = axis.onZero ? 'onZero' : rawAxisPosition;
         var axisDim = axis.dim;
 
-        // [left, right, top, bottom]
         var rect = grid.getRect();
         var rectBound = [rect.x, rect.x + rect.width, rect.y, rect.y + rect.height];
-
+        var idx = {left: 0, right: 1, top: 0, bottom: 1, onZero: 2};
         var axisOffset = axisModel.get('offset') || 0;
 
-        var posMap = {
-            x: { top: rectBound[2] - axisOffset, bottom: rectBound[3] + axisOffset },
-            y: { left: rectBound[0] - axisOffset, right: rectBound[1] + axisOffset }
-        };
-
-        posMap.x.onZero = Math.max(Math.min(getZero('y'), posMap.x.bottom), posMap.x.top);
-        posMap.y.onZero = Math.max(Math.min(getZero('x'), posMap.y.right), posMap.y.left);
+        var posBound = axisDim === 'x'
+            ? [rectBound[2] - axisOffset, rectBound[3] + axisOffset]
+            : [rectBound[0] - axisOffset, rectBound[1] + axisOffset];
 
-        function getZero(dim, val) {
-            var theAxis = grid.getAxis(dim);
-            return theAxis.toGlobalCoord(theAxis.dataToCoord(0));
+        if (axis.onZero) {
+            var otherAxis = grid.getAxis(axisDim === 'x' ? 'y' : 'x', axis.onZeroAxisIndex);
+            var onZeroCoord = otherAxis.toGlobalCoord(otherAxis.dataToCoord(0));
+            posBound[idx['onZero']] = Math.max(Math.min(onZeroCoord, posBound[1]), posBound[0]);
         }
 
         // Axis position
         layout.position = [
-            axisDim === 'y' ? posMap.y[axisPosition] : rectBound[0],
-            axisDim === 'x' ? posMap.x[axisPosition] : rectBound[3]
+            axisDim === 'y' ? posBound[idx[axisPosition]] : rectBound[0],
+            axisDim === 'x' ? posBound[idx[axisPosition]] : rectBound[3]
         ];
 
         // Axis rotation
@@ -53,7 +49,7 @@ define(function (require) {
         var dirMap = {top: -1, bottom: 1, left: -1, right: 1};
 
         layout.labelDirection = layout.tickDirection = layout.nameDirection = dirMap[rawAxisPosition];
-        layout.labelOffset = axis.onZero ? posMap[axisDim][rawAxisPosition] - posMap[axisDim].onZero : 0;
+        layout.labelOffset = axis.onZero ? posBound[idx[rawAxisPosition]] - posBound[idx['onZero']] : 0;
 
         if (axisModel.get('axisTick.inside')) {
             layout.tickDirection = -layout.tickDirection;

package/src/component/axisPointer/AxisPointerModel.js

@@ -59,9 +59,7 @@ define(function(require) {
                 formatter: null, // string | Function
                 precision: 'auto', // Or a number like 0, 1, 2 ...
                 margin: 3,
-                textStyle: {
-                    color: '#fff'
-                },
+                color: '#fff',
                 padding: [5, 7, 5, 7],
                 backgroundColor: 'auto', // default: axis line color
                 borderColor: null,

package/src/component/axisPointer/BaseAxisPointer.js

@@ -268,15 +268,20 @@ define(function(require) {
             var isInit;
             if (!this._handle) {
                 isInit = true;
-                handle = this._handle = createIcon(handleModel, {
-                    onmousemove: function (e) {
-                        // Fot mobile devicem, prevent screen slider on the button.
-                        eventTool.stop(e.event);
-                    },
-                    onmousedown: bind(this._onHandleDragMove, this, 0, 0),
-                    drift: bind(this._onHandleDragMove, this),
-                    ondragend: bind(this._onHandleDragEnd, this)
-                });
+                handle = this._handle = graphic.createIcon(
+                    handleModel.get('icon'), 
+                    {
+                        cursor: 'move',
+                        draggable: true,
+                        onmousemove: function (e) {
+                            // Fot mobile devicem, prevent screen slider on the button.
+                            eventTool.stop(e.event);
+                        },
+                        onmousedown: bind(this._onHandleDragMove, this, 0, 0),
+                        drift: bind(this._onHandleDragMove, this),
+                        ondragend: bind(this._onHandleDragEnd, this)
+                    }
+                );
                 zr.add(handle);
             }
 
@@ -476,7 +481,7 @@ define(function(require) {
         if (zrUtil.isObject(lastProps) && zrUtil.isObject(newProps)) {
             var equals = true;
             zrUtil.each(newProps, function (item, key) {
-                equals &= propsEqual(lastProps[key], item);
+                equals = equals && propsEqual(lastProps[key], item);
             });
             return !!equals;
         }
@@ -496,34 +501,6 @@ define(function(require) {
         };
     }
 
-    function createIcon(handleModel, handlers) {
-        var iconStr = handleModel.get('icon');
-        var style = {
-            x: -1, y: -1, width: 2, height: 2
-        };
-        var opt = zrUtil.extend({
-            style: {
-                strokeNoScale: true
-            },
-            rectHover: true,
-            cursor: 'move',
-            draggable: true
-        }, handlers);
-
-        return iconStr.indexOf('image://') === 0
-            ? (
-                style.image = iconStr.slice(8),
-                opt.style = style,
-                new graphic.Image(opt)
-            )
-            : graphic.makePath(
-                iconStr.replace('path://', ''),
-                opt,
-                style,
-                'center'
-            );
-    }
-
     function updateMandatoryProps(group, axisPointerModel, silent) {
         var z = axisPointerModel.get('z');
         var zlevel = axisPointerModel.get('zlevel');

package/src/component/axisPointer/axisTrigger.js

@@ -14,26 +14,41 @@ define(function(require) {
      * then hide/downplay them.
      *
      * @param {Object} coordSysAxesInfo
-     * @param {string} [currTrigger] 'click' | 'mousemove' | 'leave'
-     * @param {Array.<number>} [point] x and y, which are mandatory, specify a point to
-     *              tigger axisPointer and tooltip.
-     * @param {Object} [finder] {
-     *                  seriesIndex, dataIndex,
-     *                  axesInfo: [{
-     *                      axisDim: 'x'|'y'|'angle'|..., axisIndex: ..., value: ...
-     *                  }, ...]
-     *              }
-     *              These properties, which are optional, restrict target axes.
-     * @param {Function} dispatchAction
+     * @param {Object} payload
+     * @param {string} [payload.currTrigger] 'click' | 'mousemove' | 'leave'
+     * @param {Array.<number>} [payload.x] x and y, which are mandatory, specify a point to
+     *              trigger axisPointer and tooltip.
+     * @param {Array.<number>} [payload.y] x and y, which are mandatory, specify a point to
+     *              trigger axisPointer and tooltip.
+     * @param {Object} [payload.seriesIndex] finder, optional, restrict target axes.
+     * @param {Object} [payload.dataIndex] finder, restrict target axes.
+     * @param {Object} [payload.axesInfo] finder, restrict target axes.
+     *        [{
+     *          axisDim: 'x'|'y'|'angle'|...,
+     *          axisIndex: ...,
+     *          value: ...
+     *        }, ...]
+     * @param {Function} [payload.dispatchAction]
+     * @param {Object} [payload.tooltipOption]
+     * @param {Object|Array.<number>|Function} [payload.position] Tooltip position,
+     *        which can be specified in dispatchAction
+     * @param {module:echarts/model/Global} ecModel
      * @param {module:echarts/ExtensionAPI} api
-     * @param {Object} [tooltipOption]
      * @return {Object} content of event obj for echarts.connect.
      */
-    function axisTrigger(
-        coordSysAxesInfo, currTrigger, point, finder, dispatchAction,
-        ecModel, api, tooltipOption
-    ) {
-        finder = finder || {};
+    function axisTrigger(payload, ecModel, api) {
+        var currTrigger = payload.currTrigger;
+        var point = [payload.x, payload.y];
+        var finder = payload;
+        var dispatchAction = payload.dispatchAction || zrUtil.bind(api.dispatchAction, api);
+        var coordSysAxesInfo = ecModel.getComponent('axisPointer').coordSysAxesInfo;
+
+        // Pending
+        // See #6121. But we are not able to reproduce it yet.
+        if (!coordSysAxesInfo) {
+            return;
+        }
+
         if (illegalPoint(point)) {
             // Used in the default behavior of `connection`: use the sample seriesIndex
             // and dataIndex. And also used in the tooltipView trigger.
@@ -107,7 +122,7 @@ define(function(require) {
         });
 
         updateModelActually(showValueMap, axesInfo, outputFinder);
-        dispatchTooltipActually(dataByCoordSys, point, tooltipOption, dispatchAction);
+        dispatchTooltipActually(dataByCoordSys, point, payload, dispatchAction);
         dispatchHighDownActually(axesInfo, dispatchAction, api);
 
         return outputFinder;
@@ -290,7 +305,7 @@ define(function(require) {
         });
     }
 
-    function dispatchTooltipActually(dataByCoordSys, point, tooltipOption, dispatchAction) {
+    function dispatchTooltipActually(dataByCoordSys, point, payload, dispatchAction) {
         // Basic logic: If no showTip required, hideTip will be dispatched.
         if (illegalPoint(point) || !dataByCoordSys.list.length) {
             dispatchAction({type: 'hideTip'});
@@ -308,7 +323,8 @@ define(function(require) {
             escapeConnect: true,
             x: point[0],
             y: point[1],
-            tooltipOption: tooltipOption,
+            tooltipOption: payload.tooltipOption,
+            position: payload.position,
             dataIndexInside: sampleItem.dataIndexInside,
             dataIndex: sampleItem.dataIndex,
             seriesIndex: sampleItem.seriesIndex,

package/src/component/axisPointer/modelHelper.js

@@ -182,10 +182,7 @@ define(function(require) {
             // (cross style is dashed by default)
             if (!triggerTooltip) {
                 var crossStyle = volatileOption.lineStyle = tooltipAxisPointerModel.get('crossStyle');
-                crossStyle && zrUtil.defaults(
-                    labelOption.textStyle || (labelOption.textStyle = {}),
-                    crossStyle.textStyle
-                );
+                crossStyle && zrUtil.defaults(labelOption, crossStyle.textStyle);
             }
         }
 
@@ -202,10 +199,12 @@ define(function(require) {
             // Notice this case: this coordSys is `cartesian2D` but not `grid`.
             var coordSys = seriesModel.coordinateSystem;
             var seriesTooltipTrigger = seriesModel.get('tooltip.trigger', true);
+            var seriesTooltipShow = seriesModel.get('tooltip.show', true);
             if (!coordSys
                 || seriesTooltipTrigger === 'none'
                 || seriesTooltipTrigger === false
                 || seriesTooltipTrigger === 'item'
+                || seriesTooltipShow === false
                 || seriesModel.get('axisPointer.show', true) === false
             ) {
                 return;

package/src/component/axisPointer/viewHelper.js

@@ -45,13 +45,10 @@ define(function(require) {
             }
         );
         var labelModel = axisPointerModel.getModel('label');
-        var textStyleModel = labelModel.getModel('textStyle');
         var paddings = formatUtil.normalizeCssArray(labelModel.get('padding') || 0);
 
-        var font = textStyleModel.getFont();
-        var textRect = textContain.getBoundingRect(
-            text, font, labelPos.textAlign, labelPos.textBaseline
-        );
+        var font = labelModel.getFont();
+        var textRect = textContain.getBoundingRect(text, font);
 
         var position = labelPos.position;
         var width = textRect.width + paddings[1] + paddings[3];
@@ -76,10 +73,11 @@ define(function(require) {
         elOption.label = {
             shape: {x: 0, y: 0, width: width, height: height, r: labelModel.get('borderRadius')},
             position: position.slice(),
+            // TODO: rich
             style: {
                 text: text,
                 textFont: font,
-                textFill: textStyleModel.getTextColor(),
+                textFill: labelModel.getTextColor(),
                 textPosition: 'inside',
                 fill: bgColor,
                 stroke: labelModel.get('borderColor') || 'transparent',

package/src/component/axisPointer.js

@@ -43,19 +43,6 @@ define(function (require) {
         type: 'updateAxisPointer',
         event: 'updateAxisPointer',
         update: ':updateAxisPointer'
-    }, function (payload, ecModel, api) {
-        var outputFinder = axisTrigger(
-            ecModel.getComponent('axisPointer').coordSysAxesInfo,
-            payload.currTrigger,
-            [payload.x, payload.y],
-            payload,
-            payload.dispatchAction || zrUtil.bind(api.dispatchAction, api),
-            ecModel,
-            api,
-            payload.tooltipOption
-        );
-
-        return outputFinder;
-    });
+    }, axisTrigger);
 
 });

package/src/component/calendar/CalendarView.js

@@ -101,6 +101,7 @@ define(function (require) {
                         width: sw,
                         height: sh
                     },
+                    cursor: 'default',
                     style: itemRectStyleModel
                 });
 
@@ -226,25 +227,25 @@ define(function (require) {
 
         },
 
-        _yearTextPositionControl: function (point, orient, position, margin) {
+        _yearTextPositionControl: function (textEl, point, orient, position, margin) {
 
             point = point.slice();
             var aligns = ['center', 'bottom'];
 
-            if (position === 'top') {
-                point[1] -= margin;
-            }
             if (position === 'bottom') {
                 point[1] += margin;
                 aligns = ['center', 'top'];
             }
-            if (position === 'left') {
+            else if (position === 'left') {
                 point[0] -= margin;
             }
-            if (position === 'right') {
+            else if (position === 'right') {
                 point[0] += margin;
                 aligns = ['center', 'top'];
             }
+            else { // top
+                point[1] -= margin;
+            }
 
             var rotate = 0;
             if (position === 'left' || position === 'right') {
@@ -253,10 +254,8 @@ define(function (require) {
 
             return {
                 rotation: rotate,
-                origin: point,
+                position: point,
                 style: {
-                    x: point[0],
-                    y: point[1],
                     textAlign: aligns[0],
                     textVerticalAlign: aligns[1]
                 }
@@ -271,7 +270,6 @@ define(function (require) {
                 return;
             }
 
-            var yearLabelStyleModel = calendarModel.getModel('yearLabel.textStyle');
             var margin = yearLabel.get('margin');
             var pos = yearLabel.get('position');
 
@@ -285,7 +283,6 @@ define(function (require) {
 
             var idx = orient === 'horizontal' ? 0 : 1;
 
-
             var posPoints = {
                 top: [xc, points[idx][1]],
                 bottom: [xc, points[1 - idx][1]],
@@ -309,16 +306,9 @@ define(function (require) {
 
             var content = this._formatterLabel(formatter, params);
 
-            var yearText = new graphic.Text(
-                zrUtil.merge({
-                    z2: 30,
-                    style: {
-                        text: content,
-                        font: yearLabelStyleModel.getFont(),
-                        fill: yearLabelStyleModel.getTextColor()
-                    }
-                }, this._yearTextPositionControl(posPoints[pos], orient, pos, margin))
-            );
+            var yearText = new graphic.Text({z2: 30});
+            graphic.setTextStyle(yearText.style, yearLabel, {text: content}),
+            yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin));
 
             group.add(yearText);
         },
@@ -368,7 +358,6 @@ define(function (require) {
                 return;
             }
 
-            var monthLabelStyleModel = calendarModel.getModel('monthLabel.textStyle');
             var nameMap = monthLabel.get('nameMap');
             var margin = monthLabel.get('margin');
             var pos = monthLabel.get('position');
@@ -407,14 +396,11 @@ define(function (require) {
 
                 var content = this._formatterLabel(formatter, params);
 
-                var monthText = new graphic.Text({
-                    z2: 30,
-                    style: zrUtil.extend({
-                        text: content,
-                        font: monthLabelStyleModel.getFont(),
-                        fill: monthLabelStyleModel.getTextColor()
-                    }, this._monthTextPositionControl(tmp, isCenter, orient, pos, margin))
-                });
+                var monthText = new graphic.Text({z2: 30});
+                zrUtil.extend(
+                    graphic.setTextStyle(monthText.style, monthLabel, {text: content}),
+                    this._monthTextPositionControl(tmp, isCenter, orient, pos, margin)
+                );
 
                 group.add(monthText);
             }
@@ -453,7 +439,6 @@ define(function (require) {
             }
 
             var coordSys = calendarModel.coordinateSystem;
-            var dayLabelStyleModel = calendarModel.getModel('dayLabel.textStyle');
             var pos = dayLabel.get('position');
             var nameMap = dayLabel.get('nameMap');
             var margin = dayLabel.get('margin');
@@ -483,14 +468,12 @@ define(function (require) {
                 var point = coordSys.dataToRect([tmpD.time], false).center;
                 var day = i;
                 day = Math.abs((i + firstDayOfWeek) % 7);
-                var weekText = new graphic.Text({
-                    z2: 30,
-                    style: zrUtil.extend({
-                        text: nameMap[day],
-                        font: dayLabelStyleModel.getFont(),
-                        fill: dayLabelStyleModel.getTextColor()
-                    }, this._weekTextPositionControl(point, orient, pos, margin, cellSize))
-                });
+                var weekText = new graphic.Text({z2: 30});
+
+                zrUtil.extend(
+                    graphic.setTextStyle(weekText.style, dayLabel, {text: nameMap[day]}),
+                    this._weekTextPositionControl(point, orient, pos, margin, cellSize)
+                );
                 group.add(weekText);
             }
         }

package/src/component/dataZoom/AxisProxy.js

@@ -392,7 +392,7 @@ define(function(require) {
         var isCategoryAxis = axisModel.get('type') === 'category';
         var axisDataLen = isCategoryAxis && (axisModel.get('data') || []).length;
 
-        if (min != null && min !== 'dataMin') {
+        if (min != null && min !== 'dataMin' && typeof min !== 'function') {
             dataExtent[0] = min;
         }
         else if (isCategoryAxis) {
@@ -400,7 +400,7 @@ define(function(require) {
         }
 
         var max = axisModel.getMax(true);
-        if (max != null && max !== 'dataMax') {
+        if (max != null && max !== 'dataMax' && typeof max !== 'function') {
             dataExtent[1] = max;
         }
         else if (isCategoryAxis) {
@@ -432,6 +432,7 @@ define(function(require) {
 
         // [0, 500]: arbitrary value, guess axis extent.
         var precision = numberUtil.getPixelPrecision(valueWindow, [0, 500]);
+        precision = Math.min(precision, 20);
         // isRestore or isFull
         var useOrigin = isRestore || (percentWindow[0] === 0 && percentWindow[1] === 100);
 

package/src/component/dataZoom/DataZoomModel.js

@@ -57,7 +57,8 @@ define(function(require) {
             minSpan: null,          // 0 ~ 100
             maxSpan: null,          // 0 ~ 100
             minValueSpan: null,     // The range of dataZoom can not be smaller than that.
-            maxValueSpan: null      // The range of dataZoom can not be larger than that.
+            maxValueSpan: null,     // The range of dataZoom can not be larger than that.
+            rangeMode: null         // Array, can be 'value' or 'percent'.
         },
 
         /**
@@ -514,6 +515,7 @@ define(function(require) {
         getRangePropMode: function () {
             return this._rangePropMode.slice();
         }
+
     });
 
     function retrieveRaw(option) {
@@ -528,14 +530,24 @@ define(function(require) {
     }
 
     function updateRangeUse(dataZoomModel, rawOption) {
+        var rangePropMode = dataZoomModel._rangePropMode;
+        var rangeModeInOption = dataZoomModel.get('rangeMode');
+
         each([['start', 'startValue'], ['end', 'endValue']], function (names, index) {
-            var rangePropMode = dataZoomModel._rangePropMode;
-            if (rawOption[names[0]] != null) {
+            var percentSpecified = rawOption[names[0]] != null;
+            var valueSpecified = rawOption[names[1]] != null;
+            if (percentSpecified && !valueSpecified) {
                 rangePropMode[index] = 'percent';
             }
-            else if (rawOption[names[1]] != null) {
+            else if (!percentSpecified && valueSpecified) {
                 rangePropMode[index] = 'value';
             }
+            else if (rangeModeInOption) {
+                rangePropMode[index] = rangeModeInOption[index];
+            }
+            else if (percentSpecified) { // percentSpecified && valueSpecified
+                rangePropMode[index] = 'percent';
+            }
             // else remain its original setting.
         });
     }

package/src/component/dataZoom/InsideZoomView.js

@@ -122,9 +122,11 @@ define(function (require) {
             var directionInfo = getDirectionInfo[coordSysName](
                 null, [mouseX, mouseY], axisModel, controller, coordInfo
             );
-
-            var percentPoint = (directionInfo.pixel - directionInfo.pixelStart) /
-                directionInfo.pixelLength * (range[1] - range[0]) + range[0];
+            var percentPoint = (
+                directionInfo.signal > 0
+                    ? (directionInfo.pixelStart + directionInfo.pixelLength - directionInfo.pixel)
+                    : (directionInfo.pixel - directionInfo.pixelStart)
+                ) / directionInfo.pixelLength * (range[1] - range[0]) + range[0];
 
             scale = Math.max(1 / scale, 0);
             range[0] = (range[0] - percentPoint) * scale + percentPoint;